Question

我具有所有css和bootstrap悬停效果，overlay标记都封装在div类中，但是它们都同时悬停。这三个都具有独立的引导网格，并且效果甚至延伸到照片之间的空白区域。任何帮助将不胜感激。

HTML：

<div class="container">
  <div class="row">
      <div class="col-md-12 text-align-center">
        <h2 class="bold_font">BROWSE OUR CARDS</h2><br>
      </div>

      <div class="col-md-4 col-xs-12">
        <a href="cards/list.php?tn=beauty">
          <img class="img-responsive" src="img/_stock_mwc_beauty.jpg">
          <div class="overlay">
            <div class="overlay-content">
              <img src="img/icon-beauty-white.png" class="img-responsive center-block">
              <div class="spacer overlay-text">BEAUTY</div>
            </div>
          </div>
        </a>
      </div>

      <div class="col-md-4 col-xs-12">
        <a href="cards/list.php?tn=health">
          <img class="img-responsive" src="img/_stock_mwc_health.jpg">
          <div class="overlay">
            <div class="overlay-content">
              <img src="img/icon-health-white.png" class="img-responsive center-block">
              <div class="spacer overlay-text">HEALTH</div>
            </div>
          </div>
        </a>
      </div>

      <div class="col-md-4 col-xs-12">
        <a href="cards/list.php?tn=wellness">
          <img class="img-responsive" src="img/_stock_mwc_wellness.jpg">
          <div class="overlay">
            <div class="overlay-content">
              <img src="img/icon-wellness-white.png" class="img-responsive center-block">
              <div class="spacer overlay-text">WELLNESS</div>
            </div>
          </div>
        </a>
      </div>
  </div>
</div>

CSS：

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #f08300;
}

.container:hover .overlay {
  opacity: 1;
}

.overlay-content {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.spacer {
    margin: 20px 0px 20px 0px;
}

这是我的js小提琴，以获取更多信息，我刚刚添加了随机占位符图像：http://jsfiddle.net/cnkgqhdw/1/

Answer 1

不要在hover上执行container，请在列上执行！只需将.container:hover更改为.col-md-4:hover。

要保持正确的空间，可以使用引导程序自己的spacing system。在您的情况下，可以通过向mx-3元素添加类overlay来放置默认边距。

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: .5s ease;
  background-color: #f3a64c;
}

.col-md-4:hover .overlay {
  opacity: 1;
}

.overlay-content {
  color: white;
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.exact-center {
  text-align: center;
  vertical-align: middle;
}

.spacer {
  margin: 20px 0px 20px 0px;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  
<div class="container">
  <div class="row">
    <div class="col-md-12 text-align-center">
      <h2 class="bold_font">BROWSE OUR CARDS</h2><br>
    </div>

    <div class="col-md-4 col-xs-12">
      <img class="img-responsive" src="img/_stock_mwc_beauty.jpg">
      <div class="overlay mx-3">
        <div class="overlay-content">
          <img src="img/icon-beauty-white.png" class="img-responsive center-block">
          <div class="spacer overlay-text">BEAUTY</div>
        </div>
      </div>
    </div>

    <div class="col-md-4 col-xs-12">
      <img class="img-responsive" src="img/_stock_mwc_health.jpg">
      <div class="overlay mx-3">
        <div class="overlay-content">
          <img src="img/icon-health-white.png" class="img-responsive center-block">
          <div class="spacer overlay-text">HEALTH</div>
        </div>
      </div>
    </div>

    <div class="col-md-4 col-xs-12">
      <img class="img-responsive" src="img/_stock_mwc_wellness.jpg">
      <div class="overlay mx-3">
        <div class="overlay-content px-3">
          <img src="img/icon-wellness-white.png" class="img-responsive center-block">
          <div class="spacer overlay-text">WELLNESS</div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

您已将其设置为:hover元素上的.container，元素是整行。需要向您的卡添加课程并执行.card:hover

Answer 3

您将鼠标悬停在整个容器上。因此，这就是所有内容都处于悬停状态的原因。

您应该将类添加到

<a class="item" href="">

然后将其悬停：

.item:hover {
  //styling here
}

图像悬停效果全部同时

3 个答案: