如何將邊框添加到懸停的圓形圖像上？ css或jquery

-1

我是新來的網頁設計，我想弄清楚如何我可以添加圓形邊框到圓形圖像上懸停。我正在使用下面的圖片。我想在懸停時爲其添加紅色邊框。它已經有一個灰色的邊框。我希望邊框與內置邊框重疊。任何人都可以幫助我找出最好的方法嗎？我不太瞭解jQuery。如果解決方案是在CSS中，這將是非常好的。如何將邊框添加到懸停的圓形圖像上？ css或jquery

Circular Image

來源

2014-02-14 user3311189

如果你告訴我們你已經嘗試或建立了一個jsfiddle，我們會更容易幫助你。 –

我正在使用框架構建頁面。我只是使用fuild grids來構建它。一半的頁面有一個文本塊，另一面有一個圓形圖像。我想更改文本div的邊框顏色，並希望將圓形邊框添加到圓形圖像。就是這樣 – user3311189

這是一個很棒的教程，應該可以幫助你 - http://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/ –

LIVE DEMO

，如果你的圖像元素，即：.circ像<img class="circ" src="img.jpg">，你有

.circ{ 
    width : 100px; 
    vertical-align: middle; 
    border-radius: 50%; 
    box-shadow: 0 0 0 15px #ddd; 
    transition: box-shadow 0.3s; 
}

所有你需要補充的是：

.circ:hover{ 
    box-shadow: 0 0 0 15px #f00; 
}

來源

2014-02-14 17:39:09

這工作，謝謝。還有一個問題我也可以同時更改矩形div的邊框。如果有人徘徊在圓形或者矩形div上，兩者的邊界都應該改變。 – user3311189

@ user3311189如果他們共享相同的父項，那麼您只需在父元素上設置懸停，否則您可以使用JavaScript或一些jQuery來完成。 –

這將是CSS代碼到一個圓邊框添加到一個對象，然後更改邊框爲紅色懸停。

#circle{ 
    height:400PX; 
    width:400px; 
    border-radius:50%; 
    border:1px solid black; 
} 

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

您不需要第一次設置邊框，但我添加了這個來展示效果。希望這可以幫助。

來源

2014-02-14 17:37:50

你必須用CSS創建圓，因爲圖像確實不是圓形的。 –

同意Jay。羅科的回答看起來最合適。 –

好的，將工作謝謝！ – user3311189

如何將邊框添加到懸停的圓形圖像上？ css或jquery

回答

相關問題