Question

我的网站上有一个下拉框导航菜单：users.aber.ac.uk/mta2/cs15020

由于css在悬停儿童时不会影响父元素，因此我的下降存在轻微问题。

这是我的导航菜单，包括JQuery

目前它正在影响所有.navlists并让它们坚持下去。

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

Answer 1

如果我理解你的问题。尝试使用parent（）：

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

Answer 2

你可以用css

完全做到这一点

您只需使用顶级:hover上的li选择器，并使选择器更轻松地将类添加到具有class="hasSub"

等子菜单的菜单项

看到这个小提琴http://jsfiddle.net/Vxuph/1/

JQuery将鼠标悬停在子元素上以更改父级的CSS

2 个答案: