活躍菜單沒有工作，失去CSS懸停

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突出所選的菜單中去白 IM顏色變白（顏色）的問題是，我失去的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}