如何在圖像周圍獲得邊框

嗨，我在附近玩燈箱。我想要做的是在我的縮略圖周圍獲得邊框，以便用戶在其上方移動時會改變顏色。如何在圖像周圍獲得邊框

例子：http://lokeshdhakar.com/projects/lightbox2/

當你懸停它改變了圖像周圍的邊框顏色的縮略圖，您可以看到。任何人都可以幫助我用我的圖像做到這一點？我把它們放在一個div中，我有6個。謝謝您的幫助。

HTML：

<div class = "lightbox"> 
    <a href="images/image1.jpg" rel="lightbox[group]"><img src="images/image1t.jpg" /></a> 
    <a href="images/image2.jpg" rel="lightbox[group]"><img src="images/image2t.jpg" /></a> 
    <a href="images/image3.jpg" rel="lightbox[group]"><img src="images/image3t.jpg" /></a> 
    <a href="images/image4.jpg" rel="lightbox[group]"><img src="images/image4t.jpg" /></a> 
    <a href="images/image5.jpg" rel="lightbox[group]"><img src="images/image5t.jpg" /></a> 
    <a href="images/image6.jpg" rel="lightbox[group]"><img src="images/image6t.jpg" /></a> 
</div>

來源

2013-04-03 MadMan

嘗試這樣的事情

a img 
{ 
border:3px solid #ccc; 
} 
a:hover img 
{ 
border:3px solid #666; 
}

爲更好的例子檢查這個fiddle

來源

2013-04-03 22:50:22 trajce

最好的答案像一個款待工作。快速的問題，如果你能那些如何使它如此展開一點？我認爲這與保證金或填充有關嗎？不是2確定那些 – MadMan 2013-04-03 22:54:15

即時通訊不知道如果我得到你的權利，但你可以通過增加邊框尺寸來實現。或者，如果你想在邊框和圖像之間留出一些空白，那麼我就不適合編輯我的答案。 – trajce 2013-04-03 23:00:39

啊好的和快速的問題，我有其他的東西是使用一個標籤改變了，我該如何改變這種情況？就像我把它全部放在稱爲燈箱的div中，但不知道如何改變它。 – MadMan 2013-04-03 23:05:54

你並不需要一個邊界，只需添加一些padding和background-color到錨點。然後改變它的顏色:hover

來源

2013-04-03 22:53:21 Miguel

這會讓你陷入麻煩，當你決定使用透明PNG的。我會建議在'a'中添加一些填充，並將邊框應用於'a'。爲什麼使用背景黑客，如果你想在第一個地方實現邊界？ – Pevara 2013-04-03 22:57:45

如何在圖像周圍獲得邊框

回答

相關問題