Question

我正在尝试创建一个很酷的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/

Answer 1

您需要替换悬停时添加的填充。

似乎最好的方法是先添加一个保证金，然后在悬停时将其删除。

jsFiddle example

#dev {
    margin:10px;
}

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

这基本上取代了填充的10px。

出于定位目的，我将left:64%更改为left:33%。

Answer 2

您还可以在悬停时添加填充，从而移动图像。因此，要么在没有悬停的情况下也将填充添加到图像中，要么根本不添加任何填充。

Answer 3

为什么不在图像本身上传输padding属性而不在其悬停状态？

我编辑了你的小提琴。检查here

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

在悬停时停止使用填充移动的元素

3 个答案: