通过悬停另一个元素来更改span元素的属性

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

在任何想法中添加一个类到span。像

<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;
}