I have a list below:
<ul>
<li>
<a>Link1</a>
<ul>
<li>
<a>SubLink1</a>
</li>
...
</ul>
</li>
<li>
<a>Link2</a>
</li>
...
</ul>
And would like to add 'css_class'
to the current mouseovered <li>
element:
document.getElements('li').addEvents({
mouseover: function(){
this.addClass('css_class');
},
mouseout: function(){
this.removeClass('css_class');
}
});
But this code is wrong as my parent<li>
also has 'css_class'
.
How can I fix this?
Thanks.
You need to stopPropagation()
to prevent the event from bubbling up the listener tree:
document.getElements('li').addEvents({
mouseover: function(e){
this.addClass('css_class');
e.stopPropagation();
},
mouseout: function(){
this.removeClass('css_class');
e.stopPropagation();
}
});