1

如果悬停在以下位置，我有这段代码可以突出显示任何元素：

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

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

为了突出显示我悬停的部分，我必须更改什么？

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

4

4 回答 4

2

试试这个：

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

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

stopPropagation()防止悬停事件使 DOM 冒泡，因此如果您的元素与主体对齐，它将选择正确的元素（尝试从左上角输入以了解我的意思）。

见演示。

于 2013-03-14T19:59:27.343 回答
2

在将其应用于新悬停的元素之前，从所有元素中删除 'over' 类：

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

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

于 2013-03-14T19:59:56.940 回答
1

请记住，如果你在一个对象内部，你通常在它的父级和父级的父级等内部。这就是为什么你会得到多个“over”对象。

如果您只想突出最里面的东西，您可以尝试：

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

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

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

$('*').hover(function() {
  $('*').removeClass('over'); 
  $(this).addClass('over'); 
}, function() {
  $(this).removeClass('over');
  $(this).parent().addClass('over');
});
于 2013-03-14T20:03:44.967 回答
1

我认为您仍然希望始终突出显示一个元素，但是如果您在内部元素中，则不希望突出显示其父元素。以下将实现这一点：

$('*').hover(function() {
    if ($(this).parent() != null)
    {
        $(this).parents().removeClass('over');
    }
    $(this).addClass('over'); 
}, function() {
    $(this).removeClass('over');
    $(this).parent().addClass('over');
});
于 2013-03-14T20:04:09.137 回答