jquery - 悬停时选择元素

Question

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

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

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

我需要获得作为萤火虫或其他浏览器检查器的效果

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

这样做：

假设您的 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/

Answer 3

像这样使用：

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