html - 使用 bootstrap 在悬停时边框到 div 的边缘

Question

有没有办法在悬停时只为 div 的边缘创建边框。这是我使用 bootstrap 创建的网格的基本布局。这是我的代码笔 http://codepen.io/anon/pen/zvxEYw

  <div class="product-grid col-md-4">
    <a class="preview" href="#">PREVIEW</a>
  </div>

.product-grid{
  margin:30px 0 0 30px;
  border:1px solid #ccc;
  height:300px;
  display:block;
}
.product-grid:hover{
  border:1px solid #000;
}
/* Preview */
.preview {
  opacity: 0;
  position: absolute;
  left: 40px;
  right: 40px;
  top: 0;
  height: 30px;
  line-height: 32px;
  background-color: #fe3;
  text-align: center;
  text-decoration: none;
  color: #000;
  transition: .2s;
}

.product-grid:hover .preview {
  opacity: 1;
  top: 80px;
}

为了清楚理解，我在下面附上了示例图片

Answer 1

要达到那种效果，最好使用 CSS3，我已经使用 <svg> 做到了。作为:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
            <line class="top" x1="0" y1="0" x2="900" y2="0" />
            <line class="left" x1="0" y1="460" x2="0" y2="-920" />
            <line class="bottom" x1="300" y1="460" x2="-600" y2="460" />
            <line class="right" x1="300" y1="0" x2="300" y2="1380" />
</svg>

这里查看我的JSFiddle ，希望你正在寻找这样的东西。 它会为您解决问题。

进一步的自定义没什么大不了的，只需查看其 CSS 即可根据您的要求进行更改。

来源:tympanus