使用引导程序悬停在div边缘的边框

Question

有没有办法在悬停时仅为div的边创建边框。这是使用bootstrap创建的网格的基本布局。这是我的codepen 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

请先试试这位先生：

#div1 {
    position: relative;
    height: 100px;
    width: 100px;
    background-color: white;
    border: 1px solid transparent;
}

#div2 {
    position: absolute;
    top: -2px;
    left: -2px;
    height: 84px;
    width: 84px;
    background-color: #FFF;
    border-radius: 15px;
    padding: 10px;
}

#div1:hover {
    border: 1px solid red;
}

DEMO

Answer 2

如果您使用 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