对不同类的悬停效果更少

问题描述

我正在尝试使用 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 的字体颜色我尝试过 & ~ + 等组合但无法得到我想要的结果

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

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

谢谢

解决方法

删除~

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

,

必须

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