Ich habe eine Zeit lang an diesem Projekt gearbeitet und es funktioniert gut, aber wenn ich es realisieren, ist es nicht mehr funktioniert:unter 3 divs wirken sich nur auf ein div die gleichen Eigenschaften nach Hover-Effekt mit
.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: \t 10px 0 0 10px;
width: 95px;
height: 32px;
\t z-index:20;
}
.carousel-promo .product-out-of-stock{
color: #c15017;;
font-weight: bold;
line-height: 55px;
margin: \t 10px 0 0 10px;
width: 95px;
height: 32px;
\t z-index:20;
\t position:relative;
}
.carousel-promo .product-price{
float: right;
margin: \t 10px 10px 0 0;
font-weight: bold;
font-size: 15px;
padding-top: 6px;
\t z-index:20;
}
.carousel-promo .product-price .price-old{
\t text-decoration: line-through;
\t color: #888888;
}
.carousel-promo .product-price .price-old{
\t color: #ee001c;
}
.carousel-promo .sale_badge{
\t position:absolute;
\t z-index:2;
\t width:60px;
\t height:60px;
\t transition: all 150ms ease-in-out 0s;
\t border-radius: 0 0 30px 0;
\t line-height:60px;
\t box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.1);
\t font-size:14px;
\t color:#ffffff;
\t background-color:#83d4fb;
\t text-align:center;
}
.carousel-promo > div:hover .sale_badge {
\t width:70px;
\t height:70px;
\t line-height:70px;
}
<div class="carousel-promo"> \t \t
\t <div class="item">
\t \t <div class="sale_badge">-20%</div>
\t \t <div class="image"><img src="https://placehold.it/300x150" alt="" /></div>
\t </div>
\t \t
\t <div class="item">
\t \t <div class="sale_badge">-20%</div>
\t \t <div class="image"><img src="https://placehold.it/300x150" alt="" /></div>
\t </div>
\t \t
\t <div class="item">
\t \t <div class="sale_badge">-20%</div>
\t \t <div class="image"><img src="https://placehold.it/300x150" alt="" /></div>
\t </div>
</div>
Nach dem Ausführen des Snippets, wenn Sie über ein div gehen, wird die Größe des Preisschilds dieses bestimmten div erhöht. Sobald ich es implementieren, wenn ich ein Div schweben, erhöhen sich alle Preisschild.
ich owlcarousel
bin mit dem Artikel und meiner ursprünglichen HTML-Code ist folgendes zu schieben (die CSS ist das gleiche wie das, was ich mit seit arbeiten):
<div class="container-promo">
\t
\t <h3>Article en promotion</h3>
\t
\t <div class="carousel-promo">
\t \t
\t \t <div class="item">
\t \t \t <div class="sale_badge">-20%</div>
\t \t \t <div class="image"><img src="images/13.jpg" alt="" /></div>
\t \t </div>
\t \t
\t \t <div class="item">
\t \t \t <div class="sale_badge">-20%</div>
\t \t \t <div class="image"><img src="images/14.jpg" alt="" /></div>
\t \t </div>
\t \t
\t \t <div class="item">
\t \t \t <div class="sale_badge">-20%</div>
\t \t \t <div class="image"><img src="images/15.jpg" alt="" /></div>
\t \t </div>
\t </div>
</div>
freundlicher hilf mir, dieses Problem zu lösen.
Sorry ich bin kein englischer Muttersprachler, ich versuche mein Bestes.