Question

我在.navContainer css div中有一个导航菜单。点击后，li标记文字中的ul个标记之一会改变颜色。但是我想知道如何使用jquery，我可以保留当前所选导航项的颜色并更改当前悬停项＃d49a9a的颜色，直到用户点击并且当前所选导航项的颜色变为＃c2c0c0

请告诉我怎么做！

到目前为止我的代码：

CSS：

.navContainer ul{
    left: 10px;
    top:  20px;
    position: absolute;
    color: #c2c0c0;
    font-family: 'Terminal Dosis';
    font-weight: 200;
    font-size: 20pt;
    list-style-type: none;
    line-height: 50px;
}
.navContainer {
    left: 150px;
    top: 150px;
    position: absolute;
}

HTML（在body标签内）

<div class="navContainer">
                <ul>
                    <li style="color: #d49a9a">Work</li>
                    <li><a href="#">Blog</a></li>
                    <li>About</li>
                    <li>Contact</li>
                </ul>
            </div>
            <script type="text/javascript">
            $(".navContainer li").click( function() { 
                      $(".navContainer li, .navContainer li a").css("color", "#c2c0c0");
                      $(this).css("color", "#d49a9a");
                    });
            </script>
            <script type="text/javascript">

            </script>
        </body>

Answer 1

我认为你正在寻找这个看看

正在使用 demo

您只需要在li click上添加以下类，只需设置li元素click的颜色

.navContainer li:hover{ 
   color:#d49a9a
}

JS

$(".navContainer li").click( function() { 
    $(this).css("color", "#d49a9a");
});

Answer 2

我建议您使用这种标记来实现这一目标。你根本不需要jQuery！

<ul>
    <li><a href="#">Menu1</a><div class="dropdown"></div></li>
    <li><a href="#">Menu2</a><div class="dropdown"></div></li>
    <li><a href="#">Menu3</a><div class="dropdown"></div></li>
</ul>

然后像这样添加CSS

li{float:left; position:relative;width:60px; height:20px; background:#ccc; border:1px solid black;}
.dropdown{position:absolute; width:300px; height:200px; border:1px solid #ccc; background:#444; display:none;}
li:hover .dropdown{display:block;}

See in action

使用该标记，您将在所有时间菜单中启用li:hover。您应该在菜单树下添加子菜单。如果您想拥有更好的用户体验，可以使用jQuery hover intent plugin来延迟悬停。

Answer 3

检查一下：http://jsfiddle.net/ejawB/7/

在悬停时更改文本颜色 - Jquery

3 个答案: