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

Filed under:

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?

© Stack Overflow or respective owner

Related posts about jQuery