CSS is not picking up changes to data attributes

Question

I have a tr that, when hovered, shows some links.

I want to disable the hover behavior when a link is clicked. To do so, I am changing the value of a data attribute behaviour on the tr. But the CSS is not picking up changes the data attribute, and the link still disappears on mouseout.

The link:

tr data-behaviour="has-hover-content"
  td
    = link_to task, data: { behaviour: 'toggle-confirm-spinner hover-content', confirm: "Delete?" }, remote: true do
      = icon_tag 'trash-o'

CoffeeScript

  # When the user clicks the link
  # Disable the hover behaviour on the tr
  $(document).on 'confirm', '[data-behaviour~="toggle-confirm-spinner"]', ->
    $(@).closest('tr').data 'behaviour', 'false'

Any element that has data-behaviour="has-hover-content" data attribute, when hovered, should display any elements that have data-behaviour="hover-content".

*[data-behaviour~="has-hover-content"] {

  a[data-behaviour~="hover-content"] {
    display: none;
  }

  &:hover a[data-behaviour~="hover-content"] {
    display: inline-block;
  }
}

When a user clicks the link, the data-behaviour data attribute is set to false on the tr. This means mousing off the tr should no longer hide the links. But, it still does. I alerted the new values of the data attribute and they are being set correctly. But the CSS ignores the change.

How come?

Answer 1

Assuming jQuery, you must use .attr('data-behavior', '...') instead of .data('behaviour', '...'). This is because .data() does not change the attribute value; it modifies a copy of data attributes (that jQuery stores in memory upon initialization); and CSS has no way of looking at that.