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: 281
        
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