Question

我一直在构建一个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>`}

Answer 1

以下是一篇文章的链接，该文章显示了突出显示活动链接的3种方法：

3 Ways to Highlight Links to the Current Page with CSS

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

希望这有助于您解决问题。

CSS主动用于滑动门导航栏

1 个答案: