使用引導懸停在div上的邊框的邊框

有沒有辦法在懸停時只爲div的邊緣創建邊框。以下是使用bootstrap創建的網格的基本佈局。這裏是我的codepen http://codepen.io/anon/pen/zvxEYw 使用引導懸停在div上的邊框的邊框

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

爲了清楚明白，我附上下面

來源

2015-09-04 Shahil M

http://stackoverflow.com/questions/16050006/css-border-on-corners-only –

實現那樣的效果，是最好的，如果你使用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

來源

2015-09-04 06:28:06 vivekkupadhyay

樣本圖像，請試試這個先生：

#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

來源

2015-09-04 06:12:58

我覺得你只是複製粘貼它。同樣的答案在這裏http://stackoverflow.com/a/26349998/3243201 –

是的，我同意，但problrm我解決了它的權利.. @ SrinivasPai –

你還沒有解決它。你會引用他並回答這個問題。 –

使用引導懸停在div上的邊框的邊框

回答

相關問題