我无法更改嵌套了 <div>
的以下 HTML 结构所有具有相同类的元素 block
.我想启用悬停行为,该行为仅影响鼠标此时悬停的元素,而不影响任何其他嵌套元素。
<div class="block">
<div class="block">
<div class="block">
<div class="block">
Text
</div>
Text
</div>
Text
</div>
Text
</div>
这是要演示的 fiddle :http://jsfiddle.net/FqKCY/3/
我试着用这个:
$( ".block" ).hover(
function() {
$( this ).addClass( "hover" );
}, function() {
$( this ).removeClass( "hover" );
}
);
但这并没有帮助。也许我应该添加 if
声明 .hasClass
检查员?
我尝试的效果是否可行?
最佳答案
此解决方案利用了您开始使用的 .hover()
函数。更好的解决方案可能是编写您自己的处理程序,使用 .on()
阻止事件传播。您会注意到整个堆栈的文本已更改,因为 .css 继承,但您可以修改 .css,这样就不会发生这种情况。
使用的技术是在入口处移除所有悬停,然后仅将其应用于当前元素。退出时从所有元素中移除,然后仅应用于存在的父元素。
$(".block").hover(function () {
$(".block").removeClass("hover");
$(this).addClass("hover");
}, function () {
$(".block").removeClass("hover");
$(this).parent(".block").addClass("hover");
});
JSFiddle:http://jsfiddle.net/FqKCY/5/
关于javascript - 悬停仅影响嵌套集中的单个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23576232/