Question

我有以下菜单：

<ul class="menu menu-vert-01">
<!--start-->
<li><a href="#Semantic-Technologies">Semantic Technologies</a></li>
<li><a href="#Business-Intelligence-Solutions">Business Intelligence Solutions</a></li>
<li><a href="#Social-&-Collaboration">Social & Collaboration</a></li>
<li><a href="#Mobile-Technologies">Mobile Technologies</a></li>
<li><a href="#Content-&-Data">Content & Data</a></li>
<li><a href="#Virtual-Production">Virtual Production</a></li>
<li><a href="#Similarity">Similarity</a></li>
<li><a href="#Human-Research">Human Research</a></li>
</ul>

当菜单悬停时，css类会变为白色我点击项目时使用jquery突出显示所选菜单颜色变白（颜色）问题是我丢失了css悬停

的CSS：

.menu li a:hover{ color: white; } 

.menu-vert-01 li a{ color: black;font-family: "TitilliumText14LRegular"}
.menu-vert-01 li:hover{background: url('../img/petit-fleche-blanc-menu.png') no-repeat 260px 18px black; }

.menu_vert_selected{background: url('../img/petit-fleche-blanc-menu.png') no-repeat 260px 18px black;}

jquery的：

$(".menu-vert-01 li, .menu-vert-03 li").click(function(){
           $(this).addClass("menu_vert_selected").siblings().removeClass("menu_vert_selected")
           $(this).children().css({color: "white"}).parent('li').siblings().children().css({color: "black"})

    })

Answer 1

这是一个解决方案：

现场演示：http://jsfiddle.net/gHc74/

JS

$(".menu-vert-01 li, .menu-vert-03 li").click(function(){
$(this).addClass("menu_vert_selected").siblings().removeClass("menu_vert_selected")
})

CSS

.menu li a:hover{ color: white; } 
.menu-vert-01 li a{ color: black;font-family: "TitilliumText14LRegular"}
.menu-vert-01 li:hover{background: url('../img/petit-fleche-blanc-menu.png') no-repeat 260px 18px black; }
.menu-vert-01 li:hover a {color:white}
.menu_vert_selected{background: url('../img/petit-fleche-blanc-menu.png') no-repeat 260px 18px black;}
.menu_vert_selected a {color:white !important}

活动菜单不起作用，丢失css悬停

1 个答案: