Question

我需要在悬停效果上分配元素，但我遇到了问题：

$('html *')
.on('mouseover', function(){
    $(this).addClass('hint-mode_show-block');
})
.on('mouseout', function(){
    $(this).removeClass('hint-mode_show-block');
})

此代码分配所有父元素，但我需要选择最新级别

我需要获得firebug或其他浏览器检查器的效果

Answer 1

为了阻止冒泡，您需要使用event.stopPropagation()：

$('html *')
.on('mouseover', function(event){
    event.stopPropagation();
    $(this).addClass('hint-mode_show-block');
})
.on('mouseout', function(event){
    event.stopPropagation();
    $(this).removeClass('hint-mode_show-block');
})

Answer 2

像这样使用：

$('*')
.on('mouseover', function(e){
e.preventDefault();    
$(this).addClass('hint-mode_show-block');
})
.on('mouseout', function(e){
e.preventDefault();    
$(this).removeClass('hint-mode_show-block');
})

Answer 3

这样做：

假设你的html看起来像

<div id="big">
    <p id="big">Hello Big</p>
<div>
    <p id="inner">Inner</p>
    </div>
</div>

然后你可以这样做：

$("html *").hover(function(e){
    e.stopPropagation();
   $(e.target).addClass('hint-mode_show-block');
},function(e){
e.stopPropagation();
    $(e.target).removeClass('hint-mode_show-block');
});

工作小提琴：http://jsfiddle.net/fx2HP/

在悬停时选择元素

3 个答案: