我正在尝试制作一个按钮,该按钮在未悬停时具有白色背景和橙色图标,而在悬停时具有橙色背景和白色图标。该行为与在此处找到的其中一个字形上滚动时看到的行为非常相似。 http://getbootstrap.com/components/
我遇到的两个问题是滚动时文本突出显示为蓝色,我只能同时将背景更改为橙色而不是图标颜色。该图标是一个字形图标。有谁知道如何完成我想做的事情?
这是我正在使用的 html block 。
<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;
}
最佳答案
在这里,您只需要悬停并在 CSS 中设置颜色。
fiddle :https://jsfiddle.net/heh66yc8/
HTML:
<div class="col-xs-4">
<a href="/pace">
<div class="calc-btn">
<span class="glyphicon glyphicon-time glyph"></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;
}
.glyph
{
color:#EF5E2F;
font-size:100px;
}
.calc-btn:hover {
background-color: #EF5E2F;
text-decoration: none;
}
.calc-btn:hover .glyph {
color: #fff;
}
关于html - 将鼠标悬停在另一个元素上时如何更改元素的颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33238511/