Html 在悬停效果后，仅影响具有相同属性的3个div中的一个div

我已经在这个项目上工作了一段时间，它工作得很好，但当我实施它时，它停止了工作：

.carousel促销{
字体：普通14px无衬线；
位置：相对位置；
}
.carousel-promo.item{
位置：绝对位置；
排名：0；
左：0；
}
.旋转木马促销按钮{
边界半径：2px；
背景色：#87bae1；
盒影：0 1px 1px rgba（0,0,0,0.12）；
边界：0；
颜色：#ffffff；
字体大小：粗体；
字体大小：13px；
光标：指针；
利润率：10px 0 10px；
宽度：95px；
高度：32px；
z指数：20；
}
.旋转木马促销产品脱销{
颜色：#c15017；；
字体大小：粗体；
线高：55px；
利润率：10px 0 10px；
宽度：95px；
高度：32px；
z指数：20；
位置：相对位置；
}
.旋转木马促销.产品价格{
浮动：对；
利润率：10px 10px 0；
字体大小：粗体；
字体大小：15px；
填充顶部：6px；
z指数：20；
}
.旋转木马促销。产品价格。旧价格{
文字装饰：线条贯通；
颜色：#888888；
}
.旋转木马促销。产品价格。旧价格{
颜色：#ee001c；
}
.旋转木马促销.销售徽章{
位置：绝对位置；
z指数：2；
宽度：60px；
高度：60px；
过渡：所有150毫秒缓进缓出0秒；
边界半径：0 30px 0；
线高：60px；
盒影：0px2p1pxRGBA（0,0,0,0.1）；
字体大小：14px；
颜色：#ffffff；
背景色：#83d4fb；
文本对齐：居中；
}
.carousel promo>div:hover.sale_徽章{
宽度：70px；
高度：70像素；
线高：70px；
}

-20%
-20%
-20%

这是因为您的目标是hover上的div标记，而owl carousel也添加了一些包装div。所以，从逻辑上讲，当我们将鼠标悬停在div代码上时，所有的价格标签都会显示出来。您可能必须以这种特定的方式确定价格标签的目标，以便只有.item类hover才具有css效果。所以，更改最后一行css代码

.carousel-promo > div:hover .sale_badge {
    width:70px;
    height:70px;
    line-height:70px;
}

下面的代码比你的稍有改动

.carousel-promo > div.item:hover .sale_badge {
    width:70px;
    height:70px;
    line-height:70px;
}

所以，准确的价格标签将显示在悬停