我试图在悬停状态下更改锚元素的背景颜色,问题是我无法用下面的样式实现这个。
的jsfiddle
CSS
.dropdown ul{
margin:0; padding:0; float:left; width:100%;
}
.dropdown ul li{
list-style:none; float:left; width:100%;
}
.dropdown ul li a{
float:left; width: 265px; height:20px; padding:5px;
padding-top:10px; color:#000; font-size:12px;
border-bottom:1px dotted #666; background-color:#FFF;
}
.dropdown ul li a:hover{
background-color:#F80101; !important
}
.dropdown ul li:last-child a{
border-bottom:none;
}
.dropdown ul li a#pink{
background-color:#FFE8E8;
}
HTML
<div class="dropdown">
<ul>
<li><a href="/orders">Orders</a></li>
<li><a href="/favourites">Favourites</a></li>
<li><a href="/account" style="background-color:#FFE8E8;">Account</a></li>
<li><a href="/settings" style="background-color:#FFE8E8;">Settings</a></li>
</ul>
</div>
我很困惑,我不知道为什么这不起作用,任何帮助都会受到赞赏。
答案 0 :(得分:5)
!important
需要在结束;
之前完成。
.dropdown ul li a:hover {
background-color:#F80101 !important;
}
<强> jsFiddle example 强>
答案 1 :(得分:1)
具有相同id的两个元素在语义上是不正确的。此外,对选择器使用id会使规则具有非常高的优先级,这就是您需要使用!important
的原因。
我建议给最后2个列表项链接粉红色的类而不是id。
然后您只需要在.pink
规则之前声明:hover
规则。由于两个规则具有相同的优先级,并且后面有:hover
规则,因此它将覆盖.pink
规则。
...
<li><a href="/account" class='pink'>Account</a></li>
<li><a href="/settings" class="pink">Settings</a></li>
...
.dropdown ul li a.pink{
background-color:#FFE8E8;
}
.dropdown ul li a:hover{
background-color:#F80101;
}
答案 2 :(得分:0)
将你的id =“pink”更改为class =“pink”,而不是将你的css添加到你的悬停.dropdown ul li a.pink:hover
答案 3 :(得分:0)
添加:
假:
.dropdown ul li a:hover{
background-color:#F80101; !important
}
真:
.dropdown ul li a:hover{
background-color:#F80101 !important;
}