CSS 没有接受对数据属性的更改答案

【问题标题】：CSS is not picking up changes to data attributesCSS 没有接受对数据属性的更改
【发布时间】：2014-03-09 03:22:42
【问题描述】：

我有一个tr，当它悬停时，会显示一些链接。

我想在单击链接时禁用悬停行为。为此，我正在更改tr 上的数据属性behaviour 的值。但是 CSS 没有拾取更改数据属性，并且链接仍然在 mouseout 时消失。

链接：

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'

咖啡脚本

  # 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'

任何具有data-behaviour="has-hover-content" 数据属性的元素在悬停时都应显示具有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;
  }
}

当用户点击链接时，data-behaviour 数据属性在 tr 上设置为 false。这意味着将鼠标移离tr 不应再隐藏链接。但是，它仍然存在。我提醒了数据属性的新值，并且它们设置正确。但是 CSS 忽略了这个变化。

怎么会？

【问题讨论】：

标签： jquery css coffeescript ujs

【解决方案1】：

假设 jQuery，您必须使用 .attr('data-behavior', '...') 而不是 .data('behaviour', '...')。这是因为.data() 不会改变属性值；它修改数据属性的副本（jQuery在初始化时存储在内存中）；而 CSS 无法查看。

【讨论】：