hover用Jqueryhover事件指示选择

我有这个代码突出显示任何元素，如果徘徊在：

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

问题是我的选择周围的所有元素也会突出显示。 看看示例： JsFiddle尝试将鼠标hover在span ，您将看到p和body/html也被突出显示。

我需要改变什么才能仅抬高我hover的部分？

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

Answer 1

试试这个：

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

stopPropagation()可以防止hover事件冒出DOM，所以万一你的元素向左冲洗到正文，它会选择正确的元素（尝试从左上角进入看看我的意思）。

见DEMO 。

Answer 2

在将其应用于新hover的元素之前，从所有元素中删除“over”类：

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

http://jsfiddle.net/mtHyF/12/

Answer 3

请记住，如果你在一个物体内，你通常在它的父母，父母的父母等等里面。这就是为什么你会得到多个“过”的物体。

如果你只想要最重要的事情，你可以尝试：

 if($(this).children().length==0) { $(this).addClass('over'); } 

这将拒绝突出显示其中包含其他对象的任何内容。

如果你想要最里面的对象当前hover（既不是它的父母也不是孩子），也许：

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

Answer 4

我认为你仍然希望一直突出显示一个元素，但是如果你在一个内部元素中，你不希望它的父元素被突出显示。 以下将完成：

 $('*').hover(function() { if ($(this).parent() != null) { $(this).parents().removeClass('over'); } $(this).addClass('over'); }, function() { $(this).removeClass('over'); $(this).parent().addClass('over'); });