停止在悬停时使用填充移动的元素 [英] Stop an element moving with padding on hover

问题描述

我想创建一个很酷的css3效果，当你将鼠标悬停在图像上时，边框从图像的中间慢慢地出来。为此，我有一个透明边框，然后显示边框和应用填充悬停，但当我添加填充它移动图像。有没有办法保持图片不移动，仍然有悬停添加的填充？

I'm trying to create a cool css3 effect where by when you hover over an image a border comes out from the middle of the image slowly. To do so I have a transparent border and then show the border and apply padding on hover, but when I add the padding it moves the image. Is there a way to keep the image from moving and still have the padding added on hover?

#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/

推荐答案

您需要移动悬停时添加的填充。

You need to displace the padding added on hover.

看起来好像最好的办法是先添加一个边框然后在悬停。

It seems as though the best approach is to add a margin initially and then remove it on hover.

jsFiddle示例

#dev {
    margin:10px;
}

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

这实际上取代了 10px c>

This essentially displaces the 10px of padding.

为了定位，我将 left：33％。

这篇关于停止在悬停时使用填充移动的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！