Question

i have the following problem. I have a css dropdown navigation and if there is a mouseover on the dropdown part of the navigation I want the background of the “navigation heading” to keep its background color that it gets when there is a hover on it. Problem is if the user moves on and hovers over the dropdown, the hover state of the “navigation heading” goes back to “normal”. That’s why I thought I could use jquery to alter it.

But unfortunately I don’t know how to select the specific element.

Here is an example for the navigation:

<ul> 
                    <li> 
                        <p class="naviHead first">Finanzen</p> 
                            <ul> 
                                <li><a href="http://www.spardaxx.de/kredit" title="SparDaxx Ratenkredit">Ratenkredit</a></li>
                                <li><a href="http://www.spardaxx.de/baufinanzierung" title="SparDaxx Baufinanzierung">Baufinanzierung</a></li>
                                <li><a href="http://www.spardaxx.de/altersvorsorge" title="SparDaxx Riester Rente">Riester Rente</a></li>
                            </ul> 
                    </li> 
                </ul> 

So if the user hovers over the p tag, the dropdown ul opens. Now I want to change the background color of the p if someone hovers over the following ul..

here is my jquery so far

$().ready(function() {
            $('#TopNav ul ul').mouseover(function() {
                 $(this).parents('p.naviHead').filter(':first').css("background", "black");


            })
        });

I guess the solution i simple, but I have no idea.. So any help is appreciated. Thx! 🙂

Answer 1

$(this).prev().css("backgroundColor", "black");  

or if you have a more complex layout then –

$(this).parent().find('p.naviHead').css("backgroundColor", "black");

may be better