Question

我有这段代码：

<div class="buttons-wrapper">
    <div class="comments-qty">
       <i class="fa fa-comments"></i>
    </div>
    <div class="link-to-post"><a href="#">
       <i class="fa fa-chevron-right"></i></a>
    </div>
</div>

当我将div＆＃34; button-wrapper＆＃34;悬停时，我想更改fa-chevron-right的颜色。我用过这个：

.buttons-wrapper:hover + .fa-chevron-right{
    background-color:green;
    color:white !important;
}

但它没有用。

Answer 1

尝试这样，因为+用于下一个兄弟选择器以选择子元素使用.buttons-wrapper:hover .fa-chevron-right{

＆＃13;

.buttons-wrapper:hover  .fa-chevron-right{
background-color:green;
color:white !important;
}

＆＃13;

<div class="buttons-wrapper">
    <div class="comments-qty">
       <i class="fa fa-comments"></i>
    </div>
    <div class="link-to-post"><a href="#">
       <i class="fa fa-chevron-right">adsadsd</i></a>
    </div>
</div>

＆＃13;

Answer 2

此

.buttons-wrapper:hover + .fa-chevron-right{
background-color:green;
color:white !important;
}

应该是这个

.buttons-wrapper:hover .fa-chevron-right{
background-color:green;
color:white !important;
}

由于.fa-chevron-right不是.buttons-wrapper

的兄弟

Answer 3

您需要删除加号。

.buttons-wrapper:hover .fa-chevron-right{
background-color:green;
color:white !important;

}

当我将鼠标悬停在div上时自定义链接

3 个答案: