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.
CSS is not picking up changes to data attributes
-
09-10-2022 - |
Domanda
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?
Soluzione