我有这个css和html的面包屑,但我不想要悬停状态。相反,我希望能够在<li>
中显示一个项目,其颜色与其他项目不同。我试着把不同的课程放在不同的背景上,但我失败了。
任何人都知道怎么做?
谢谢!
body{
font-family:Arial, Helvetica, sans-serif;
}
#crumbs ul li a {
display: block;
float: left;
height: 15px;
background: #999;
text-align: center;
padding: 20px 30px 0 20px;
position: relative;
margin: 0 10px 0 0;
font-size: 18px;
text-decoration: none;
color: #fff;
line-height: 1px;
cursor:default;
}
#crumbs ul li a:after {
content: "";
position: absolute; right: -17px; top: 0;
border-top: 17px solid transparent;
border-bottom: 17px solid transparent;
border-left: 17px solid #999;
z-index: 1;
}
#crumbs ul li a:before {
content: "";
border-top: 17px solid transparent;
border-bottom: 17px solid transparent;
border-left: 17px solid #fff;
position: absolute; left: 0; top: 0;
}
#crumbs ul li {
display:inline;
}
#crumbs ul li a:hover {
background: #779519;
}
#crumbs ul li a:hover:after {
border-left-color: #779519;
}
#crumbs ul li:first-child a {
border-top-left: 10px; border-bottom-left: 10px;
}
#crumbs ul li:first-child a:before {
display: none;
}
#crumbs ul li:last-child a {
padding-right: 80px;
border-top-right: 10px; border-bottom-right: 10px;
}
#crumbs ul li:last-child a:after {
display: none;
}
&#13;
<div id="crumbs">
<ul>
<li><a href="#">Tipo de Bilhete / Zona</a></li>
<li><a href="#">Sector</a></li>
<li><a href="#">Lugar</a></li>
</ul>
</div>
&#13;
答案 0 :(得分:0)
我只是将:hover
部分更改为color
,允许您将class="color"
添加到其中一个<li>
body {
font-family: Arial, Helvetica, sans-serif;
}
#crumbs ul li a {
display: block;
float: left;
height: 15px;
background: #999;
text-align: center;
padding: 20px 30px 0 20px;
position: relative;
margin: 0 10px 0 0;
font-size: 18px;
text-decoration: none;
color: #fff;
line-height: 1px;
cursor: default;
}
#crumbs ul li a:after {
content: "";
position: absolute;
right: -17px;
top: 0;
border-top: 17px solid transparent;
border-bottom: 17px solid transparent;
border-left: 17px solid #999;
z-index: 1;
}
#crumbs ul li a:before {
content: "";
border-top: 17px solid transparent;
border-bottom: 17px solid transparent;
border-left: 17px solid #fff;
position: absolute;
left: 0;
top: 0;
}
#crumbs ul li {
display: inline;
}
#crumbs ul li a.color {
background: #779519;
}
#crumbs ul li a.color:after {
border-left-color: #779519;
}
#crumbs ul li:first-child a {
border-top-left: 10px;
border-bottom-left: 10px;
}
#crumbs ul li:first-child a:before {
display: none;
}
#crumbs ul li:last-child a {
padding-right: 80px;
border-top-right: 10px;
border-bottom-right: 10px;
}
#crumbs ul li:last-child a:after {
display: none;
}
&#13;
<div id="crumbs">
<ul>
<li><a href="#">Tipo de Bilhete / Zona</a>
</li>
<li><a href="#" class="color">Sector</a>
</li>
<li><a href="#">Lugar</a>
</li>
</ul>
</div>
&#13;
答案 1 :(得分:0)
如上所述,最简单的方法是在元素中添加一个类。
基本上,CSS
#crumbs ul li a.DifferentColor { color:#whatever }
然后使用新的类名实现它。 HTML
<li><a href="#" class="DifferentColor">Sector</a></li>
为重复而道歉,早先被打败了!