如何在鼠標懸停在另一個元素上時更改元素的顏色？

Question

我試圖製作一個按鈕，當沒有被徘徊時有一個白色背景和一個橙色圖標，並且在懸停時有一個橙色背景和一個白色圖標。該行爲與在滾動瀏覽此處找到的其中一個圖標時看到的行爲非常相似。

我遇到的兩個問題是滾動時文本突出顯示爲藍色，並且我只能將背景更改爲橙色，而不是同時更改圖標顏色。該圖標是一個圖形。有誰知道如何完成我想要做的事情？

這是我正在使用的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; 
} 

Answer 1

在這裏，你只需要一個懸停和設置在CSS的顏色。

小提琴：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; 
} 

Answer 2

試試這個

.calc-btn a{ 
text-decoration:none; 
color:inherit; 
} 
.calc-btn{ 
color:orange; 
background-color:#fff; 
} 

.calc-btn:hover{ 
color:#fff; 
background-color:orange; 
} 

Answer 3

這裏是修復。這是更好的。在懸停的文本下面沒有一行。 查看它在這裏工作：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; 
}