jquery當前菜單項改變顏色問題

Question

默認a:link和a:visited背景顏色是透明的，顏色為黑色。 然后a：指定懸停，背景為黑色，顏色為白色。 這很好用。

這是問題所在：我插入了執行背景和顏色更改的jquery腳本，在我的情況下將背景黑色和顏色設置為白色 - 與a:hover相同。 此腳本正在執行所需操作，但文本顏色保持黑色。 有幫助嗎？

以下是代碼：

<ul id="subnav">
    <li><a href="http://127.0.0.1:4001/wbdemo/pages/abc.php" class=”red” onclick=”selected(this)”><h99>Home<h99/></a></li>
    <li><a href="http://127.0.0.1:4001/wbdemo/pages/asd.php"><h99>Home</h99></a></li>
    <li><a href="http://127.0.0.1:4001/wbdemo/pages/rtz.php"><h99>Home</h99/></a></li> 
    <li><a href="#"><h99>Home</h99/></a></li> 
    <li><a href="#"><h99>Home</h99/></a></li>
</ul> 

<script type="text/javascript">
$(document).ready(function(){
    $('#subnav a').each(function(index) {
        if(this.href.trim() == window.location)
            $(this).addClass("selected");
    });
});
</script>

ul
{ list-style-type: none;
  margin:0;
  padding:0;
  overflow: hidden;
}

ul a:link, ul a:visited
{ display: block;
  width: 240px;
  background-color: tranparent;
  text-align: right;
  text-transform: uppercase;
  text-decoration: none;
  height: 40px;
  color: #000000
}

ul a:hover, .selected
{ background-color: #000000;
  color: #ffffff
}

Answer 1

將最后一個css類拆分為兩個：

ul a:hover
{ 
  background-color: #000000;
  color: #ffffff;
}

.selected
{ 
  background-color: #000000;
  color: #ffffff !important;
}

或者，更簡單，只需將!important添加到最后一行：

ul a:hover, .selected
{ 
  background-color: #000000;
  color: #ffffff !important;
}

Answer 2

嘗試

$(this).css('color','coloryouwant')