Making a nested link system change it's <li> bg on hover of other <li>

Question

Hello all,

Hoping someone has the time to help me out with some jquery confusion?

I am trying to get the parent of an elements background change when the child is hovered and then go back to its default when the childs hover has ended.

The problem I have at the moment is with my script I cannot get the code to return the background colour to its default from the *.css file, when the hove ris lost the parents background remains the colour it was changed too.

The Jquery::

$(document).ready(function() {
    $('ul.sf-menu li li li').hover(function() {
         var currentID = "#";
         currentID += $(this).parent().parent().attr('id');

         $('ul.sf-menu li li ul').parent(currentID).css('background', 'pink');
         $('ul.sf-menu li li li').focusout().css('background', '#00467F');
    });
});

The HTML::

<ul class="sf-menu">
    <li id='education'><a>Education</a>
        <ul>
            <li class='education' id='6'><a href='#' title='Desktops'>Desktops</a>
                <ul>
                    <li class='education2'><a href='#' title='#'>#</a></li>
                    <li class='education2'><a href='#' title='#'>#</a></li>
                    <li class='education2'><a href='#' title='#'>#</a></li>
                </ul>
            </li>

            <li class='education' id='9'><a href='#' title='#'>#</a>
                <ul>
                    <li class='education2'><a href='#' title='#'>#</a></li>
                </ul>
            </li>

            <li class='education' id='11'><a href='#' title='#'>#</a>
                <ul>
                    <li class='education2'><a href='#' title='#'>#</a></li>
                </ul>
            </li>

            <li class='education' id='14'><a href='#' title='#'>#</a>
                <ul>
                     <li class='education2'><a href='#' title='#'>#</a></li>
                     <li class='education2'><a href='#' title='#'>#</a></li>
                     <li class='education2'><a href='#' title='#'>#</a></li>
                     <li class='education2'><a href='#' title='#'>#</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Thank you in advance anyone that can shine a light on this problem for me.

Answer 1

Use the jQuery syntax suggested here, as it has an In and an Out handler:

http://api.jquery.com/hover/#hover1

.hover( handlerIn(eventObject), handlerOut(eventObject) )

Answer 2

As I said in my comment, you should utilize the power of hover, as provided by jQuery. Additionally, you also do not need to make your selectors quite as complicated. Again, utilizing the power of jQuery to move around in the DOM, you can select the parent of the li with almost no effort (there's even a nice example in the documentation). Here is an example here that (I believe) is what you want to do. If not, please let me know, and I will fix it/update it.

Just so you understand the code:

$(function() {
    $('li').hover(function() {
        $(this).parent().css('background-color', 'pink');
    }, function() {
        $(this).parent().css('background-color', 'white');
    });
});

Based on the list item that is being hovered over, there are two functions defined. The first is for mouseenter and the second is for mouseleave. Basically, you just need to tell the DOM how to update based on either of those functions. After that, any time you hover over an li, its parent will be highlighted with the color that you wish.

Answer 3

• Use jQuery's hover with two parameters, first will be called monmousemove, the second will be called onmouseout. Use the first to set your css, use the second to clear/reset css.
• To reset css back to it's stylesheet values, set to ''.

Check here: http://jsfiddle.net/SF3Tz/