我有以下列表:
<ul>
<li>
<a>Link1</a>
<ul>
<li>
<a>SubLink1</a>
</li>
...
</ul>
</li>
<li>
<a>Link2</a>
</li>
...
</ul>
并想添加'css_class'
到当前鼠标悬停的位置<li>
元素:
document.getElements('li').addEvents({
mouseover: function(){
this.addClass('css_class');
},
mouseout: function(){
this.removeClass('css_class');
}
});
但是这个代码是错误的,因为我的 parent <li>
还有'css_class'
。
我怎样才能解决这个问题?
谢谢。
最佳答案
您需要 stopPropagation()
来防止事件在监听器树中冒泡:
document.getElements('li').addEvents({
mouseover: function(e){
this.addClass('css_class');
e.stopPropagation();
},
mouseout: function(){
this.removeClass('css_class');
e.stopPropagation();
}
});
关于JavaScript 嵌套列表 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18779854/