I am trying to make a button that has a white background and an orange icon when not being hovered and has an orange background and a white icon when hovered over. The behavior is very similar to the behavior seen when scrolling over one of the glyphicons found here. http://getbootstrap.com/components/
我正在嘗試做一個按鈕,當沒有懸空的時候有一個白色的背景和一個橙色的圖標,當懸空的時候有一個橙色的背景和一個白色的圖標。這種行為非常類似於在滾動一個字形圖標時看到的行為。http://getbootstrap.com/components/
The two problems I am encountering is that the text is highlighted blue when scrolled over and that I can only change the background to orange and not the icon color at the same time. The icon is a glyphicon. Does anyone know how to accomplish what I am trying to do?
我遇到的兩個問題是,滾動時文本被突出顯示為藍色,我只能將背景更改為橙色,而不能同時更改圖標顏色。圖標是一個符號。有人知道我要做什么嗎?
This is the block of html I am working with.
這是我正在使用的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>
and the corresponding css
和相應的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;
}
3
Here, you just need a hover and to set the color in the CSS.
在這里,您只需要一個鼠標懸停並在CSS中設置顏色。
fiddle: https://jsfiddle.net/heh66yc8/
小提琴:https://jsfiddle.net/heh66yc8/
HTML:
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
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;
}
2
Try this
試試這個
.calc-btn a{
text-decoration:none;
color:inherit;
}
.calc-btn{
color:orange;
background-color:#fff;
}
.calc-btn:hover{
color:#fff;
background-color:orange;
}
0
Here is the fix. This is is better. No line under the text on hover. View it working here: http://jsfiddle.net/agfcontact/4eb0u9v4/35/
這是修復。這是更好。鼠標懸停時,文本下方沒有線。查看這里的工作:http://jsfiddle.net/agfcontact/4eb0u9v4/35/。
.text-under-gylphicon{
display: block;
}
.calc-btn{
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;
color: #999;
}
.calc-btn:hover {
background-color: #EF5E2F;
text-decoration: none;
color: #FFFFFF;
}
.col-xs-4 a:hover{
text-decoration:none;
}
本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2015/10/20/7201a82d93bfe245c459fa0a1a13c79.html。