如何讓border-radius保持懸停效果

我創建了一個只是一個圖像的div，但是當徘徊時，原始div被另一個div遮蓋，並帶有一些文本和普通的彩色背景。如何讓border-radius保持懸停效果

這裏是我的意思的jsfiddle：'Mask on Hover'

所有的代碼似乎工作，包括一些不錯的CSS過渡。我遇到的問題是，原始的div和mask div都有一個邊界半徑，但是當我將鼠標懸停在它們上方時，border-radius消失了一秒鐘，然後突然返回。出於某種原因，當我徘徊的時候，它不時會出現毛刺，並且一直沒有邊界半徑。

有什麼辦法可以防止這種情況發生？也許有辦法將內容保留在div裏面嗎？我已經嘗試使用overflow:none以及實際上將border但它繼續發生。

來源

2013-12-20 MrVeiga

您也在爲邊界半徑設置動畫。這意味着當您懸停或取消懸停時，邊框以方塊開始，然後作爲動畫的一部分前往半徑。

來源

2013-12-20 16:58:01

哦，我明白了，好點！有沒有一種方法來動畫div而不是邊界半徑？換句話說，是否有任何方法來保持相同的功能，而不是爲邊界設置動畫？ – MrVeiga

對不起，它需要一段時間 - 如果您將視圖img的所有屬性更改爲轉換變換（和-webkit-transition -webkit-transform），則應避免爲邊界半徑設置動畫。但是，顯然在轉換後應用邊界半徑的webkit瀏覽器中存在一個錯誤，這意味着方角將會顯示。 http://stackoverflow.com/questions/16687023/bug-with-transform-scale-and-overflow-hidden-in-chrome –

您可以用圖像的父DIV做到這一點：

position: relative; 
 
z-index: 99;

希望這將正常工作。

來源

2016-12-31 11:28:25

如何讓border-radius保持懸停效果

回答

相關問題