通過懸停另一個元素來更改跨度元素的屬性

Question

問題

我想訪問span glyphicon glyphicon-play並更改其顏色。 如何在用戶懸停在整個元素上時動態地執行此操作？

建議

.whole:hover > span.glyphicon.glyphicon-play { 
    color: red; 
} 

這並不遺憾的是工作。

代碼

<div class="whole"> 
     <button type="button" class="btn btn-default special"> 
      <span class="glyphicon glyphicon-play"></span> 
     </button><span class="title">my title</span> 
    </div> 

的jsfiddle：

http://jsfiddle.net/grqy6mtp/

Answer 1

剛剛從你的代碼中刪除>家長選擇，因爲它的後代，不是直接孩子。

.whole:hover span.glyphicon.glyphicon-play { 
    color: red; 
} 

Answer 2

這應該工作，只是刪除>

.whole:hover span.glyphicon{ 
    color:red; 
} 

DEMO

Answer 3

.whole:hover span.glyphicon.glyphicon-play { 
    color: red; 
} 

Answer 4

加個班變成跨度任何你想要的想法。像

<div class="whole"> 
    <button type="button" class="btn btn-default special"> 
     <span class="glyphicon glyphicon-play changeColor"></span> 
    </button><span class="title">my title</span> 
</div> 

.whole:hover .changeColor{ 
    background: red; 
    color: white; 
}