如何在div內的特定div上進行懸停？

Question

我正在使用Bootstrap模板。我的CSS懸停有點問題。我只是在div內部div上懸停。

這撥弄顯示我的問題：https://jsfiddle.net/iklas/q5Lm7cLe/

當我將鼠標懸停在縮略圖懸停時顯示所有父div產品盒。

我想要當我懸停在產品盒上懸停顯示只是縮略圖div。

我該如何解決這個問題？相對於.thumbnail：

Answer 1

當你將鼠標懸停在縮略圖懸停時顯示所有父東陽你不給的CSS屬性的位置只需添加position: relative;到.thumbnail

Updated fiddle

Answer 2

。

.product-box a { 
 
    color: #666; 
 
} 
 

 
.product-box a:hover { 
 
    color: #666; 
 
    text-decoration: none; 
 
} 
 

 
.thumbnail { 
 
    position: relative; 
 
} 
 

 
.thumbnail:hover:before { 
 
    background-color: #000; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
    position: absolute; 
 
    content: ""; 
 
    top: 0px; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    margin: auto; 
 
    opacity: 0.5; 
 
    -webkit-transition: all 0.1s ease; 
 
    -moz-transition: all 0.1s ease; 
 
    -ms-transition: all 0.1s ease; 
 
    -o-transition: all 0.1s ease; 
 
    transition: all 0.1s ease; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="product-box col-md-3 col-sm-4 col-xs-12"> 
 
     <a href="#"> 
 
     <div class="thumbnail"> 
 
      <img src="http://dummyimage.com/100x250/bdbdbd/fff&text=image" alt="..."> 
 
     </div> 
 
     <div class="caption"> 
 
      <h4 class="product-title">SheIn Grey Contrast Collar Long Sleeve Pleated Dress</h4> 
 
      <h4 class="brand-name pull-left"><span>By</span> Day Dresses</h4> 
 
      <h4 class="price-number pull-right">$34.56</h4> 
 
      <div class="clearfix"></div> 
 
     </div> 
 
     </a> 
 
    </div> 
 
    <!-- /.box-product --> 
 
    </div> 
 
</div>

Answer 3

你的轉變不工作，因爲你沒有用過這個。 嘗試這是行得通的。

.thumbnail:before { 
    content: ""; 
    transition: all 600ms linear 0s; 
} 

.thumbnail:hover:before { 
    background-color: #000; 
    width: 100%; 
    height: 100%; 
    display: block; 
    position: absolute; 
    content: ""; 
    top: 0px; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    margin: auto; 
    opacity: 0.5; 
    -webkit-transition: all 600ms ease; 
    -moz-transition: all 600ms ease; 
    -ms-transition: all 600ms ease; 
    -o-transition: all 600ms ease; 
    transition: all 600ms ease; 
}