如果匹配某些条件,我想对正在悬停的元素应用叠加,或者如果不符合条件,则对匹配条件的第一个父元素应用叠加。
给出以下示例HTML并假设我想将叠加层应用于具有“匹配”类的任何元素:
<div class='matches'>
some Text <span>some more text</span>
</div>
我喜欢它,如果用户在“某些文字”上盘旋,叠加层应用于div,如果它们悬停在“更多文本”上,叠加层也会应用于div,因为这是第一个父级一类'匹配'。
我能想到的唯一方法就是在每一个看起来非常低效的元素上观察悬停事件。可以吗,或者有更好的方法吗?
答案 0 :(得分:1)
这应该有效
$('.matches').on('mouseenter', function(e) {
// $(this) is .matches element
})
编辑 - 原版过于复杂。 $(this)
应该是您想要的元素。
在此处发布提问者的解决方案,以便更容易找到:
$('.matches').hover(function(e) {
$('.matches').removeClass('highlight');
$(this).addClass('highlight');
e.stopPropagation();
}, function (e) {
$(this).removeClass('highlight');
$(this).parent().closest('.matches').addClass('highlight');
});