1

I'm wanting to highlight the text in a particular column of a table red on hover.

I'm selecting the cells with data attribute 'data-highlight' like this:

[data-highlight]:hover {
  color:red;
  }

This works fine until you try to do it within a handlebarsjs datatemplate.

Works in IE but not in chrome.

I have an example in jsfiddle:

http://jsfiddle.net/q4u0zrn2/1/

When you hover over the items in the Job Title column in IE they turn red. This doesn't happen in chrome.

Can anyone explain why and suggest a fix?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Jeeves
  • 127
  • 1
  • 11

2 Answers2

1

This seems to be a bug in chrome, using the :hover selector in combination with td[attr] selector doesn't work.

Here's minimal example that reproduces the bug: http://jsfiddle.net/q4u0zrn2/12/

The example also has some workarounds: wrap your content in a div with the proper attribute or use a different selector, e.g. a class selector.

ekuusela
  • 5,034
  • 1
  • 25
  • 43
  • Attribute selectors in general are quite broken in Chrome - see http://stackoverflow.com/questions/27372281/checking-css-title-attribute-if-its-not-empty-and-add-content/27372509#27372509 (where I first discovered this bug) and http://stackoverflow.com/questions/8951822/combine-css-attribute-and-pseudo-element-selectors/8988418#8988418 – BoltClock Dec 23 '15 at 08:41
  • In case someone gets here note that *Chrome have fixed this bug*. I use Chrome 59, everything works perfect. – oriadam Jul 27 '17 at 06:47
0

Indeed it is a bug in chrome.

you can work around it by adding this css before:

[data-highlight] {
    cursor:default;
}

see your fixed sample: http://jsfiddle.net/q4u0zrn2/14/

Roey
  • 1,647
  • 21
  • 16