CSS没有获取数据属性的更改

Question

我有一个tr,当盘旋时,显示一些链接.

我想在单击链接时禁用悬停行为.要做到这一点,我改变数据属性的值behaviour上tr.但是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'

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'

具有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-behaviourtr上的data属性设置为false.这意味着将鼠标移除tr应该不再隐藏链接.但是,它仍然存在.我提醒了数据属性的新值,它们正在正确设置.但CSS忽略了这一变化.

怎么会？

Answer 1

假设jQuery,你必须使用.attr('data-behavior', '...')而不是.data('behaviour', '...').这是因为.data()不改变属性值; 它修改了数据属性的副本(jQuery在初始化时存储在内存中); 和CSS无法看到它.