Question

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

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

链接：

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;
  }
}

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

怎么回事？

Answer 1

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

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

1 个答案: