jQuery make child div visible on hover (on effective li element only, not parent!)
- by Dennis
I've already tried all of the existing posts related to this, but they doesn't work as I want it...
The HTML:
<ol class="sortable">
<li>
<div>
<a href="#">Start Page</a>
<div class="li_options">
<a href="#"><img src="img/icons/small_add.png" /></a>
<a href="#" onClick="[..]"><img src="img/icons/small_remove.png" /></a>
</div>
<div class="clear"></div>
</div>
<ol>
<li>
<div>
<a href="#">Sub Seite</a>
<div class="li_options">
<a href="#"><img src="img/icons/small_add.png" /></a>
<a href="#" onClick="[..]"><img src="img/icons/small_remove.png" /></a>
</div>
<div class="clear"></div>
</div>
<ol>
<li>
<div>
<a href="#">Sub Sub Seite</a>
<div class="li_options">
<a href="#"><img src="img/icons/small_add.png" /></a>
<a href="#" onClick="[..]"><img src="img/icons/small_remove.png" /></a>
</div>
<div class="clear"></div>
</div>
</li>
</ol>
</li>
</ol>
</li>
<div class="clear"></div>
This should look like this:
Start Page
Sub Page
Sub Page
I want the div.li_options which is set for every li element to be shown only on hovering element. I know, that the parent's li is also being "hovered" on hovering child elements, but I don't those "li_options" to be displayed.
The best solution so far:
$(document).ready(function() {
$('.sortable li').mouseover(function() {
$(this).children().children('.li_options').show();
}).mouseout(function() {
$(this).children().children('.li_options').hide();
});
});
But with this, parents aren't being excluded... I don't know how to point on them, because there can be endless levels. Do you know how to get this working?
