jQuery make child div visible on hover (on effective li element only, not parent!)
Posted
by
Dennis
on Stack Overflow
See other posts from Stack Overflow
or by Dennis
Published on 2012-10-28T09:57:17Z
Indexed on
2012/10/28
11:01 UTC
Read the original article
Hit count: 231
jQuery
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
- 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?
© Stack Overflow or respective owner