hover - 不同类的悬停效果更少

Question

我正在尝试使用 less 对两个 div 产生悬停效果

<div class="uniforms">
    Image goes Here 
    <div class="textWrap">
        <div class="text">
                <div class="name">
                    Product Name Here
                </div>

                <div class="price">
                    Price Here
                </div>
        </div>
    </div>      
</div>

将鼠标悬停在 .uniforms 上时，我想更改 .uniforms 的背景颜色和 .name 的字体颜色我尝试了 & ~ + ect 的组合，但无法得到我想要的结果

.uniforms{
    background-color: grey;
    padding: 10px;
    
    &:hover{
        background-color: red;
        
        ~ .name{
            color: white;
        }   
    }
}

我可以用 CSS 做到这一点，但不能让它用更少的东西工作。任何帮助，将不胜感激。

谢谢

标签： hoverlesssiblings

Answer 1

删除即可~

.uniforms{
    background-color: grey;
    padding: 10px;
    
    &:hover{
        background-color: red;        
        .name{
            color: white;
        }   
    }
}