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

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

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

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

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

Answer 2

您需要删除加号。

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

}

Answer 3

这个

.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

的兄弟姐妹

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

Customize link when I hover on a div

html

css

hover