停止移動與填充懸停的元素

我想創建一個很酷的css3效果，當你將鼠標懸停在圖像上時，緩慢地從圖像中間出來一個邊框。要做到這一點，我有一個透明的邊框，然後顯示邊框並在懸停時應用填充，但是當我添加填充時，它會移動圖像。有沒有辦法保持圖像移動，並且仍然在懸停時添加填充？停止移動與填充懸停的元素

#dev:hover{ 
    border:solid 3px #76c2af; 
    padding:10px; 
} 


img{ 
    position: absolute; 
    left:64%; 
    margin-left:-128px; 
    border:solid 3px transparent; 
    border-radius: 80px; 
    transition-duration: 1s; 
    -webkit-transition-duration: 1s; /* Safari */ 
}

示例 - http://jsfiddle.net/kqWZZ/1/

來源

2013-12-15 user2598957

你需要移動在懸停添加填充。

看來好像最好的方法是先添加一個邊距，然後在懸停時刪除它。

jsFiddle example

#dev { 
    margin:10px; 
} 

#dev:hover{ 
    border:solid 3px #76c2af; 
    padding:10px; 
    margin:0; 
}

這實質上置換填充的10px。

爲了定位，我將更改爲left:33%。

來源

2013-12-15 01:30:23

這是一個有用的修復，但它有點動搖懸停在不知道這只是我在Firefox？ – user2598957

@ user2598957固定。那是你在找什麼？ –

您還在懸停上添加了一個填充，這會移動圖像。所以要麼不加懸停地將圖像添加到圖像中，要麼根本不添加任何填充。

來源

2013-12-15 01:39:09 greenish

我想填充懸停，因爲這是整個效果點，重新閱讀的問題 – user2598957

爲什麼不傳遞圖像本身的填充屬性，而不是懸停狀態？

我編輯了你的小提琴。檢查它here

img{ 
    padding:10px; 
    .... 
}

來源

2013-12-15 02:10:16

停止移動與填充懸停的元素

回答

相關問題