html - 当我悬停在 div 上时自定义链接

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“buttons-wrapper”时，我想更改 fa-chevron-right 的颜色。我用过这个:

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

但它不起作用。

Answer 1

这个

.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 的兄弟