html - 将鼠标悬停在图像上时如何设置不同的背景形状？

Question

我在列中创建了三个图像，并设置了

column-count: 3;

然后我为这三张图片设置了边框宽度。现在我需要了解悬停状态。

HTML:

<div class="wrap">
  <h1 class="content-title">
     <span>Popular</span>
  </h1>
  <div class="col-3">
    <div class="popular">
      <a href="#">
        <img src="http://s7.postimg.org/bq6aahcpn/Book_ll_4.jpg" />
      </a>
    </div>
    <div class="caption"><a href="olymbic.html"><h2>Saina nehwal first match</h2><p>fasdfjaksdksdfh skdfk</p></a>
    </div>
    <div class="popular">
      <a href="#">
        <img src="http://s7.postimg.org/bq6aahcpn/Book_ll_4.jpg" />
      </a>
    </div>
    <div class="caption"><a href="#"><h2>Saina nehwal first match</h2><p>fasdfjaksdksdfh skdfk</p></a>
    </div>
    <div class="popular">
      <a href="#">
        <img src="http://s7.postimg.org/bq6aahcpn/Book_ll_4.jpg" />
      </a>
    </div>
    <div class="caption"><a href="#"><h2>Saina nehwal first match</h2><p>fasdfjaksdksdfh skdfk</p></a>
    </div>
  </div>
</div>

当我悬停图片时，它需要像这样显示

这是我工作的 jsfiddle:http://jsfiddle.net/6g7v899q/

我需要这样的东西[你能在阅读帖子部分引用这个网站 gatesnotes.com 吗？..我需要这样的东西..]

我可以知道怎么做吗？

提前致谢。

Answer 1

这可以通过框上边框的 width 和 color 实现，您引用的页面具有以下样式:

.hpunit .hpimgrel .hpbook:hover .gbox {
   border-left: 59px solid #ddd;
   border-right: 59px solid #ddd;
}

在你的代码中可以这样:

.popular {
  display:inline-block;
  border:40px solid #eee;
  box-sizing:border-box;
}
.popular:hover {
  border-left:40px solid gray;
  border-right:40px solid gray;
}

<div class="wrap">
  <h1 class="content-title">
     <span>Popular</span>
  </h1>
  <div class="col-3">
    <div class="popular">
      <a href="#">
        <img src="http://s7.postimg.org/bq6aahcpn/Book_ll_4.jpg" />
      </a>
    </div>
    <div class="caption"><a href="olymbic.html"><h2>Saina nehwal first match</h2><p>fasdfjaksdksdfh skdfk</p></a>
    </div>
    <div class="popular">
      <a href="#">
        <img src="http://s7.postimg.org/bq6aahcpn/Book_ll_4.jpg" />
      </a>
    </div>
    <div class="caption"><a href="#"><h2>Saina nehwal first match</h2><p>fasdfjaksdksdfh skdfk</p></a>
    </div>
    <div class="popular">
      <a href="#">
        <img src="http://s7.postimg.org/bq6aahcpn/Book_ll_4.jpg" />
      </a>
    </div>
    <div class="caption"><a href="#"><h2>Saina nehwal first match</h2><p>fasdfjaksdksdfh skdfk</p></a>
    </div>
  </div>
</div>