0

我一直在构建一个 CSS 滑动门导航菜单，当我将鼠标悬停在选项卡上时它会发生变化并且效果很好，但我也希望它在链接处于活动状态时发生变化，但我似乎无法让活动规则起作用我的 CSS。如果有人对解决方案有任何建议，我将不胜感激！

这是CSS代码：

 .menu {
 position: absolute;
 float: left;
 color: #1e1e1e;
 width: 1000px;
 font-size:17px;
 margin-left: -35px;
 z-index: 2;
 }

 .menu ul {
 list-style-type: none;
 margin-top: 136px;
 position: absolute;
 color:#1e1e1e;
 margin-left: -5px;
 }

 .menu ul li {
 float: left;
 position: relative;
 padding-right: 0px;

 }

 .menu ul li a {
 text-align: left;
 display:block;
 text-decoration:none;
 color:#1e1e1e;
 text-align: right;
 }


 .menu ul li a:hover {
 color: #ffffff;
 text-decoration: bold;
 }


 .menu ul li ul {
 color: #ffffff;
 text-decoration: bold;
 }

 .menu ul li:hover ul {
 display: block;
 position: absolute;
 margin-top: 8px;
 text-decoration:bold;
 color: #ffffff;
 }

 .menu ul li:hover ul li a {
 display:block;
 background:#000000;
 color:#ffffff;
 width: 100px;
 text-align: left;
 text-decoration:bold;
 }

 .menu ul li:hover ul li a:hover {
 background:#000000;
 color:#fff;
 text-decoration:bold;

 }

.home span {
background: transparent url('images/home.gif') no-repeat top left; 
display: block;
line-height: 42px;
padding: 7px 0 0px 0px; 
width:110px;

}

.home:hover span {
background: transparent url('images/home.gif') no-repeat top right; 
display: block;
line-height: 42px;
padding: 7px 0 0px 0px; 
width:110px;
}

.home:active span {
background: transparent url('images/home.gif') no-repeat top right; 
display: block;
line-height: 42px;
padding: 7px 0 0px 0px; 
width:110px;
}

.necklaces span {
background: transparent url('images/necklaces.gif') no-repeat top left; 
display: block;
line-height: 42px; 
padding: 7px 0 5px 0px;
width:142px;

 }

.necklaces:hover span {
background: transparent url('images/necklaces.gif') no-repeat top right;  
display: block;
line-height: 42px; 
padding: 7px 0 5px 0px;
width:142px;
}

.necklaces:active span {
background: transparent url('images/necklaces.gif') no-repeat top right; 
display: block;
line-height: 42px; 
padding: 7px 0 5px 0px;
width:142px;
}

<!--.....................................-->

<!--This is the HTML code -->


<div class="menu" float="left">
<ul>


<li class="home">
<a href="http://html-link"><span>.</span></a>
</li>


<li class="necklaces">
<a href="http://html-link"><span>.</span></a>
</li>


</ul></div>`}
4

1 回答 1

2

这是一篇文章的链接，其中显示了突出显示活动链接的 3 种解决方案：

使用 CSS 突出显示当前页面链接的 3 种方法

就个人而言，我使用 jQuery 来突出显示活动链接。

希望这可以帮助您解决问题。

于 2012-03-11T09:03:18.400 回答