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

Question

我已经在这个元素上工作了一段时间，它运行良好，但是当我实现它时，它停止工作了:

.carousel-promo {
    font:normal 14px sans-serif;
    position:relative;
}

.carousel-promo.item{
    position: absolute;
    top: 0;
    left: 0;
}

.carousel-promo button{
    border-radius: 2px;
    background-color:  #87bae1;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
    border: 0;
    color: #ffffff;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    margin:	10px 0 0 10px;
    width: 95px;
    height: 32px;
	z-index:20;
}

.carousel-promo .product-out-of-stock{
    color: #c15017;;
    font-weight: bold;
    line-height: 55px;
    margin:	10px 0 0 10px;
    width: 95px;
    height: 32px;
	z-index:20;
	position:relative;
}

.carousel-promo .product-price{
    float: right;
    margin:	10px 10px 0 0;
    font-weight: bold;
    font-size: 15px;
    padding-top: 6px;
	z-index:20;
}

.carousel-promo .product-price .price-old{

	text-decoration: line-through;
	color: #888888;
}

.carousel-promo .product-price .price-old{

	color: #ee001c;
}

.carousel-promo .sale_badge{
	position:absolute;
	z-index:2;
	width:60px;
	height:60px;
	transition: all 150ms ease-in-out 0s;
	border-radius: 0 0 30px 0;
	line-height:60px;
	box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.1);
	font-size:14px;
	color:#ffffff;
	background-color:#83d4fb;
	text-align:center;
}

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

<div class="carousel-promo">		
	<div class="item">
		<div class="sale_badge">-20%</div>
		<div class="image"><img src="https://placehold.it/300x150"  alt="" /></div>
	</div>
  
  		
	<div class="item">
		<div class="sale_badge">-20%</div>
		<div class="image"><img src="https://placehold.it/300x150"  alt="" /></div>
	</div>
  
  		
	<div class="item">
		<div class="sale_badge">-20%</div>
		<div class="image"><img src="https://placehold.it/300x150"  alt="" /></div>
	</div>
</div>

运行代码段后，当您越过一个 div 时，该特定 div 的价格标签的大小将会增加。一旦我实现它，当我将鼠标悬停在一个 div 上时，所有价格标签都会增加。

我正在使用 owlcarousel 滑动元素，我的原始 html 代码如下(CSS 与我从那以后一直使用的相同):

<div class="container-promo">
	
	<h3>Article en promotion</h3>
	
	<div class="carousel-promo">
		
		<div class="item">
			<div class="sale_badge">-20%</div>
			<div class="image"><img src="images/13.jpg"  alt="" /></div>
		</div>
		
		<div class="item">
			<div class="sale_badge">-20%</div>
			<div class="image"><img src="images/14.jpg"  alt="" /></div>
		</div>
		
		<div class="item">
			<div class="sale_badge">-20%</div>
			<div class="image"><img src="images/15.jpg"  alt="" /></div>
		</div>
	</div>
</div>

请帮我解决这个问题。

对不起，我的母语不是英语，我正在尽力而为。

Answer 1

那是因为您的目标是悬停时的 div 标记，而 owl-carousel 也添加了一些包装 div。因此，从逻辑上讲，只要我们将鼠标悬停在一个 div 代码上，所有价格标签就会显示出来。您可能必须以这种特定方式定位您的价格标签，以便只有 .item 类悬停会产生该 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;
}

因此，准确的价格标签将在悬停时显示。