我试图制作一个按钮,当没有被徘徊时有一个白色背景和一个橙色图标,并且在悬停时有一个橙色背景和一个白色图标。该行为与在滚动浏览此处找到的其中一个图标时看到的行为非常相似。如何在鼠标悬停在另一个元素上时更改元素的颜色?
我遇到的两个问题是滚动时文本突出显示为蓝色,并且我只能将背景更改为橙色,而不是同时更改图标颜色。该图标是一个图形。有谁知道如何完成我想要做的事情?
这是我正在使用的html块。
<div class="col-xs-4">
<a href="/pace">
<div class="calc-btn">
<span class="glyphicon glyphicon-time" style="font-size:100px;"></span>
<span class="text-under-gylphicon">Pace</span>
</div>
</a>
</div>
和相应的CSS
.text-under-gylphicon{
display: block;
}
.calc-btn, .calc-btn a{
margin: 10px 0;
padding: 10px;
font-size: 33px;
line-height: 1.4;
text-align: center;
background-color: #f9f9f9;
list-style-type: none;
list-style-position: outside;
border: 1px solid #fff;
text-decoration: none;
}
.calc-btn:hover {
background-color: #EF5E2F;
text-decoration: none;
}
.calc-btn:hover::after {
color: #FFFFFF;
}
太谢谢你了!我一直在挣扎几个小时。 – Xerunix
没问题,很高兴我可以帮助:) – Jesse