悬停时图像移动 - 边框问题

Below is the code

以下是代码

HTML

HTML

<div class="fgimg">
</div>

CSS

CSS

.fgimg {
width: 200px;
height: 200px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url('https://c1.staticflickr.com/3/2669/5830411257_b21bf9e931_b.jpg') no-repeat;
margin-left:30%;
margin-top:10px;
background-position: center center;
}
.fgimg:hover {
cursor:pointer;
border-radius: 210px;
border-color:#226fa3;
border:outset;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;

}

Here is the demo : http://jsfiddle.net/sathish_opr/03kkqywy/1/

这是演示：http：//jsfiddle.net/sathish_opr/03kkqywy/1/

When we hover on the image, image position changes.

当我们将鼠标悬停在图像上时，图像位置会发生变化。

I would like to see the border color of the image when hovered on, but image position changes automatically :(

我希望在悬停时看到图像的边框颜色，但图像位置会自动更改:(

what could be the problem ?

可能是什么问题呢？

4 个解决方案

#1

You either set an invisible border on the image in the normal state:

您可以在正常状态下在图像上设置不可见的边框：

border: 3px outset transparent;

Or you could apply:

或者您可以申请：

box-sizing: border-box;

This way, the border is calculated to the inside of the width and height. (the 200px width for example)

这样，边界计算为宽度和高度的内部。（例如200px宽度）

DEMO TIME: http://jsfiddle.net/03kkqywy/4/

演示时间：http：//jsfiddle.net/03kkqywy/4/

BTW: you don't need any prefixing on border-radius anymore. But if you do, allways put the non prefix property as the last one of those.

顺便说一句：你不再需要在border-radius上添加任何前缀了。但是，如果你这样做，总是将非前缀属性作为最后一个属性。

#2

Now Define your

现在定义你的

.fgimg{
border: solid 3px transparent;
}

Demo Link

演示链接

#3

This happens because you haven't set a border to the image initially. When you hover, the border is added to the overall width of the image and hence you can see it move.

发生这种情况是因为您最初没有为图像设置边框。悬停时，边框会添加到图像的整体宽度，因此您可以看到它移动。

Set a transparent border to the image initially. This way the border is already added o the width of the image and the image won't be moving when you hover over it.

最初为图像设置透明边框。这样，边框已添加到图像的宽度，当您将鼠标悬停在图像上时，图像将不会移动。

.fgimg{
    border:outset;
    border-color: transparent;
}

http://jsfiddle.net/sathish_opr/03kkqywy/1/

#4

css code

css代码

.fgimg {
    width: 200px;
    height: 200px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    background: url('https://c1.staticflickr.com/3/2669/5830411257_b21bf9e931_b.jpg') no-repeat;
    margin-left:30%;
    margin-top:10px;
    background-position: center center;
    border: solid 3px transparent;
}
.fgimg:hover {
    cursor:pointer;
    border-radius: 210px;
    border-color:#226fa3;
    border:outset;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
}

url http://jsfiddle.net/03kkqywy/3/demo

网址http://jsfiddle.net/03kkqywy/3/demo

#1