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

jquery当前菜单项改变颜色问题

2 个答案: