CODEWITHSUNDEEP
javascriptjquerycsshtmlnavigation
Max Atkins
Max Atkins

Reputation: 97

JQuery Hover over child element to change CSS of parent

I have a drop down box navigation menu on my website here: users.aber.ac.uk/mta2/cs15020

There were minor problems with my drop downs since css can't affect parent elements when hovering children.

This is my navigaton menu including JQuery

At the moment it is affecting all the .navlists and makes them stick.

<h1 id = "title">  Max Atkins </h1>
            <ul id="menu"> <!-- Drop down navigation menu --> 
                <li class = "navlists">
                    <a href ="../"> Home </a>
                </li>
                <li class = "navlists"> <!-- Main buttons -->
                    <a> Web Assignment </a>
                    <ul class = "sub-menu"> <!-- Drop downs --> 
                        <li class = "sublists">
                            <a href = "./cv.shtml"> CV </a>
                        </li>
                        <li class = "lastitem"> <!-- Specific styling for this link --> 
                            <a href = "./writeup.shtml"> Write-Up </a>
                        </li>
                    </ul>
                </li>
                <li class = "navlists"> <!-- Main buttons -->
                    <a> Richard's Assignment </a> 
                    <ul class = "sub-menu"> <!-- Drop downs --> 
                        <li class = "sublists">
                            <a href = "wordpress"> WordPress </a>
                        </li>
                        <li class = "lastitem"> <!-- Specific styling for this link --> 
                            <a href = "webshop/catalog"> WebShop </a>
                        </li>
                    </ul>
                </li>
            </ul>

            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
            <script>

            $(document).ready(function () 
            {
                $(".navlists > a").hover(function() 
                {
                    $(this).find(".navlists > a").css("border-bottom-left-radius", "0");
                    $(this).find(".navlists > a").css("border-bottom-right-radius", "0");

                    $(".sublists > a, .lastitem > a").hover(function () 
                    {
                        $(".navlists > a").css("border-bottom-left-radius", "0");
                        $(".navlists > a").css("border-bottom-right-radius", "0");
                    });
                }); 

                $(".sublists > a, .lastitem > a").mouseleave(function () 
                {
                    $(".navlists > a").css("border-bottom-left-radius", "15px");
                    $(".navlists > a").css("border-bottom-right-radius", "15px");
                });
            });


            </script>

Upvotes: 1

Views: 1250

Answers (2)

Eugene
Eugene

Reputation: 53

If I understand your question correctly. Try to use parent():

$(this).find(".navlists > a").parent().css('...','...');

Upvotes: 2

haxxxton
haxxxton

Reputation: 6442

you can do this purely with css

you just need to use the :hover selector on the top level li and to make selectors easier add a class to menu items that have a submenu like class="hasSub"

see this fiddle http://jsfiddle.net/Vxuph/1/

Upvotes: 1

Related Questions