悬停通过Jquery悬停事件指示选择 [英] Hover Indicate selection with Jquery hover event

问题描述

I have this code to highlight any element if hovered on:

$('*').hover(function() {
  $(this).addClass('over'); 
}, function() {
  $(this).removeClass('over');
});

问题在于我选择的所有元素也会突出显示。看看这个例子： JsFiddle 尝试悬停在 span code>，你会看到 p 和 body / html 也被高亮显示。

The problem is that all elements around my selection will also be highlighted. Take a look at the example: JsFiddle Try to hover on the span, you will see the p and body/html are being highlighted as well.

为了仅强调Im悬停的部分，我必须改变什么？

What do I have to change in order to heighlight only the part Im hovering?

ps我必须使用 * ，因为我不知道属性是什么。

ps I have to use * because I dont know what the attributes are.

推荐答案

试试这个：

Try this:

$('*').hover(function(e) {
  $('*').removeClass('over');
  $(this).addClass('over');
  e.stopPropagation();

}, function() {
  $(this).parent().addClass('over');
  $(this).removeClass('over');
});

stopPropagation（） 可以防止悬停事件向上冒泡DOM，所以如果元素左对齐到正文，它会选择正确的元素（尝试从左上角进入，看看我的意思）。

stopPropagation() prevents the hover event from bubbling up the DOM, so in case your elements are flush left to the body, it will select the correct element (try entering from the top left to see what I mean).

请参阅 DEMO 。

这篇关于悬停通过Jquery悬停事件指示选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！