Question

我有这段代码突出显示任何元素：

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

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

为了仅仅照亮我悬停的部分，我需要更改什么？

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

Answer 1

试试这个：

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

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

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

请参阅DEMO。

Answer 2

在将所有元素应用到新悬停的元素之前，从所有元素中删除'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(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');
});

悬停用Jquery悬停事件指示选择

4 个答案: