Question

我正在使用Bootstrap处理模板。我的CSS悬停有点问题。我只是悬停在div内的div。

这个小提示显示我的问题：https://jsfiddle.net/iklas/q5Lm7cLe/

当我将鼠标悬停在缩略图上时，所有父div产品框上都会显示悬停。

我希望当我将鼠标悬停在产品包装盒上时，只显示缩略图div上的悬停。

我该如何解决这个问题？

Answer 1

只需将position: relative;添加到.thumbnail

即可

Updated fiddle

Answer 2

当您将鼠标悬停在缩略图上时，所有父级都会显示悬停，因为您还没有给出css属性Position：relative to .thumbnail。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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;
 }

如何在div内的特定div上进行悬停？

3 个答案: