如何为每个链接设置不同的悬停颜色
如何为每个链接设置不同的悬停颜色
提问于 2014-03-19 19:11:38
我有以下设计资料：
<div id="second-menu-navi" class="navi">
<a href="" id="tab-1">Why Choose Us</a>
<a href="" id="tab-2">Physicians</a>
<a href="" id="tab-3">Medical Specialties</a>
<a href="" id="tab-4">Locations</a>
<a href="" id="tab-5">Urgent Care</a>
<a href="" id="tab-6">Radiology</a>
<a href="" id="tab-7">Lab</a>
</div>
</div>以及下面的CSS，它在悬停时改变背景色：
#second-menu-navi a:hover, #second-menu-navi a.active {
background-color:#155E9B;
}我试图通过添加以下CSS将每个选项卡更改为不同的悬停颜色：
#second-menu-navi #tab-1 a.active, #second-menu-navi #tab-1 a.hover {
background-color: #155E9B;
}
#tab-2 a.active, #tab-2 a.hover {
background-color: #159B77;
}
#tab-3 a.active, #tab-3 a.hover {
background-color: #1E9B15;
}
#tab-4 a.active, #tab-4 a.hover {
background-color: #969B15;
}
#tab-5 a.active, #tab-5 a.hover {
background-color: #9B2B15;
}
#tab-6 a.active, #tab-6 a.hover {
background-color: #9B1574;
}
#tab-7 a.active, #tab-7 a.hover {
background-color: #70159B;
}但在悬停时，所有链接都不会改变背景色。请帮我解决这个问题。
回答 5
Stack Overflow用户
回答已采纳
发布于 2014-03-19 19:16:19
这样你就可以改变鼠标悬停上每个链接的颜色。这是工作的演示。
a#tab-1:hover {
color:aqua;
}
a#tab-2:hover {
color:red;
}
a#tab-3:hover {
color:green;
}
a#tab-4:hover {
color:gray;
}
a#tab-5:hover {
color:yellow;
}
a#tab-6:hover {
color:gold;
}
a#tab-7:hover {
color:blue;
}您可以使背景图像透明。这是演示。
#container {
position: relative;
}
#container:after {
content : "";
display: block;
position: absolute;
top: 0;
left: 0;
background-image: url(http://lorempixel.com/300/300);
width: 300px;
height: 300px;
opacity : 0.5;
-moz-opacity:0.5;
filter: alpha(opacity=50);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /*IE8*/
}如果使用RGBA属性。所有现代浏览器都支持它。但是，若要在IE8中工作或降低使用filter的要求，请执行以下操作。
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";Stack Overflow用户
发布于 2014-03-19 19:14:04
原则上，对于使用伪选择器，将句点改为冒号：
a.hover变成：
a:hover请参阅有关:hover在Mozilla开发人员网络上的更多信息。
对于您的问题，您需要直接将:hover应用于#tab-1，而不是a。所以：
#tab-1 a.hover
变成：
#tab-1:hover或a#tab-1:hover.
Stack Overflow用户
发布于 2014-03-19 19:13:39
您正在选择一个<a>子#tab-2，以及使用错误的伪选择器.
使用#tab-2 a.hover代替a#tab-2:hover。
不要使用#tab-2 a.active，而是使用a#tab-2:active。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22515907
复制相关文章
相似问题
腾讯云开发者
