title: CSS is not picking up changes to data attributes
body: <p>I have a <code>tr</code> that, when hovered, shows some links.</p>
  
  <p>I want to disable the hover behavior when a link is clicked. To do so, I am changing the value of a data attribute <code>behaviour</code> on the <code>tr</code>. But the CSS is not picking up changes the data attribute, and the link still disappears on mouseout.</p>
  
  <p>The link:</p>
  
  <pre><code>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'
  </code></pre>
  
  <p>CoffeeScript</p>
  
  <pre><code>  # When the user clicks the link
    # Disable the hover behaviour on the tr
    $(document).on 'confirm', '[data-behaviour~="toggle-confirm-spinner"]', -&gt;
      $(@).closest('tr').data 'behaviour', 'false'
  </code></pre>
  
  <p>Any element that has <code>data-behaviour="has-hover-content"</code> data attribute, when hovered, should display any elements that have <code>data-behaviour="hover-content"</code>.</p>
  
  <pre><code>*[data-behaviour~="has-hover-content"] {
  
    a[data-behaviour~="hover-content"] {
      display: none;
    }
  
    &amp;:hover a[data-behaviour~="hover-content"] {
      display: inline-block;
    }
  }
  </code></pre>
  
  <p>When a user clicks the link, the <code>data-behaviour</code> data attribute is set to false on the tr. This means mousing off the <code>tr</code> 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.</p>
  
  <p>How come?</p>