jquery:将 css 规则应用于添加到元素的数据属性？

Question

在不使用类的情况下，如何在动态添加的数据属性上应用简单的 css 规则？这是我当前的类解决方案，我想用添加数据替换它，并将 css 规则应用于具有数据属性“突出显示”的元素。这可能吗？我这样做的原因是为了避免弄乱底层的 DOM 数据。

$(document).on('mouseover',function (e) {
    e.stopPropagation();
    $(e.target).addClass('highlight');

}).on('mouseout', function (e) {
        e.stopPropagation();
        $(e.target).removeClass('highlight');
});

Answer 1

jQuery

$(document).on('mouseover',function (e) {
    e.stopPropagation();
    $(e.target).attr('data-highlight', 'init');

}).on('mouseout', function (e) {
    e.stopPropagation();
    $(e.target).removeAttr('data-highlight');
});

CSS

[data-highlight] {
    background: yellow;
}

jsFiddle Demo .