2016-05-01 3 views
-1

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.

Antwort

1

Das ist, weil Sie div-Tag auf Hover ausrichten, während Eulen-Karussell einige Wrapper divs auch fügt. Also, logisch, wenn wir den Mauszeiger über einen Div-Code bewegen, werden alle Preisschilder angezeigt. Möglicherweise müssen Sie Ihre Preisschilder auf diese spezielle Art und Weise ausrichten, sodass nur der Klassen-Hover von .item diesen CSS-Effekt übernimmt. So ändern Sie das letzte Mal CSS-Code Zeile

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

mit folgenden Code, der nur ein bisschen verändert als deine

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

Und so wird genaue Preisschilder auf schweben angezeigt.

Verwandte Themen