Question

你好我有一个列是一个按钮，我试图让它改变背景颜色和他的元素颜色，但是我在改变其中一个图标元素时遇到了一些麻烦，上面我离开了我的代码：

html：

<a href="">
<div class="col-xs-4 bordered-right btn-dashboard">
<p class=""><strong>TITLE</strong></p>
     <h4><i  class="fa fa-wheelchair"></i></h4>
        <p><small>Subt Title</small></p>
</div>
</a>

CSS：

.col-xs-4.btn-dashboard:hover {
    background-color: #35b34c;
    color: white;
}

.col-xs-4.btn-dashboard.fa-wheelchair:hover{
    color:white;
}

Answer 1

将.col-xs-4.btn-dashboard.fa-wheelchair:hover更改为.col-xs-4.btn-dashboard:hover .fa-wheelchair。

Answer 2

您应该从CSS规则中删除.col-xs-4和.fa-wheelchair。如果您决定使用.col-xs-3或其他.fa-something-else图标，会发生什么？每次进行此类更改时，都必须更新CSS。我会改为：

.btn-dashboard:hover {
    background-color: #35b34c;
    color: white;
}

.btn-dashboard:hover h4 {
  color: yellow;
}

如果您只想更改font-awesome中h4图标的颜色，可以改为：

.btn-dashboard:hover h4 i { /* or i.fa */
    color: yellow;
}

Answer 3

你需要在你的CSS类之间留一个空格，你应该把悬停放到div中，所以当鼠标悬停在div上时，图标显示为白色，而不仅仅是在图标上（我认为这是你的意图）

＆＃13;

.col-xs-4.btn-dashboard:hover {
    background-color: #35b34c;
    color: white;
}

.col-xs-4.btn-dashboard:hover .fa-wheelchair{
    color:white;
}

＆＃13;

<a href="">
<div class="col-xs-4 bordered-right btn-dashboard">
<p class=""><strong>TITLE</strong></p>
     <h4><i  class="fa fa-wheelchair">ICON</i></h4>
        <p><small>Subt Title</small></p>
</div>
</a>

＆＃13;

Answer 4

您的CSS选择器链错误（缺少空格） - 尝试 -

.col-xs-4.btn-dashboard .fa.fa-wheelchair

你的CSS正在寻找包含所有这些类的元素 - 而不是具有一个类的东西的子元素。

悬停2 div同时

4 个答案: