Question

所以我在我的网站上有一个图片，里面有一个8px的边框，就像一个缩略图，所以当我点击img链接到一个页面时。但是，当我将鼠标悬停在图像上时，它会移动（我认为是精确的）16px（两侧边框的长度。这与div有边框的事实有什么关系，当图像悬停时它是不再在div中？我不知道。解释的一些原因会很棒。这是我的代码。

HTML：

<div id="box1" class="box"><br>
   <a href="google.com"><img src="images/box1.png" /></a><br>
</div><br>

CSS：

.box {
    height: 250px;
    width: 250px;
    margin-right: 20px;
    border: 8px solid white;
    float: left;
    display: block;
}


 img {
    width: 250px;
    height: 250px;
    -moz-transform: rotate(0);
    transform: rotate(0);
}

我已经尝试过像img a：hover来改变事物而且还留下了margin-left：-16px，但那也没有用。任何帮助，将不胜感激。感谢

Answer 1

您必须使用a img:hover，而不是img a:hover，例如

img a:hover {
    margin-left: -16px;
}

Answer 2

我制作了一个关于你的东西的JSFiddle，现在没有悬停问题。我不确定它是否曾经悬停过，但你的CSS都很糟糕。其中不应包含随机<br>标记，因为<br>根本不是CSS的一部分。这是你的JSFiddle。

http://jsfiddle.net/PsW2S/

当我将鼠标悬停在它上面时，为什么我的图像会移动

2 个答案: