jQuery make child div visible on hover (on effective li element only, not parent!)

Question

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?

Answer 1

Working demo http://jsfiddle.net/sm8vS/

Updated version http://jsfiddle.net/36cV3/

OR like this => http://jsfiddle.net/N6xqm/ (Smaller way)

Extra Also you can look few plugins by the name of tree view menu. - if need be or if you are looking for something like this: http://jquery.bassistance.de/treeview/demo/

Behaviour hover over Start Page => Sub Seite will appear, Now hover over Sub Seite => => Sub Sub Seite will appear.

For better parsing I added - sub-menu and sub-sub-menu class in your respective menu structure. rest code is as below.

Hope it fits your needs :)

Another much small way to do http://jsfiddle.net/N6xqm/ :)

(function($) {

    $('.li_options').hide();
        $('a').mouseover(function() {
            $(this).next('.li_options').show();
        }).mouseout(function() {
            $('.li_options').hide();
        });

})(jQuery);​

Sample code

    (function($) {

    $('.li_options').hide();
    $('.sortable li').mouseover(function() {
        $(this).find('ol').show();
        anchor_hover();
    }).mouseout(function() {
        anchor_hover();
        $(this).find('ol').hide();
    });

    function anchor_hover() {
        $('a').mouseover(function() {
            $(this).next('.li_options').show();
        }).mouseout(function() {
            $('.li_options').hide();
        });

    }


})(jQuery);​

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 class="sub-menu">
        <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 class="sub-sub-menu">
                <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>​