HTML&；CSS-将其悬停在DIV上并稍微移动

在HTML+CSS中，我有一个奇怪的行为：当我将图片悬停时，它会移动一点（在Chrome和ie 10中）。如果图片位于顶部，则不会出现

这是非常简单的代码，所以我不知道该怎么做

使用此CSS：

div.effect img.image {
    /*type your css here which you want to use for both*/
}
div:hover.effect img.image {
    display: none;
}
div.effect img.hover {
    display: none;
}
div:hover.effect img.hover {
    display: block;
}

这个HTML：

<div class="effect" style="position: absolute; bottom:15px;right:135px;" title="Update from us">
   <img class="image" src="http://www.w3schools.com/images/w3schoolslogoNEW310113.gif" />
   <img class="image hover" src="http://www.w3schools.com/images/w3schoolslogoNEW310113.gif" />
</div>

你可以在这里看到：

提前谢谢

将此添加到css中：

div.effect img.image {
    /*type your css here which you want to use for both*/
    display: block;
}

请看这里：

编辑：

如果要在用户将鼠标悬停在

div

上时更改图片，请使用以下css：

img.image{
    display: block;
}

img.hover{
    display: none;
}

div.effect:hover img.image {
    display: none;
}

div.effect:hover img.hover {
    display:block;
}

试试这个：

div.effect img.image {
    float: left;
}

也给这个CSS

div{height:60px}

---

你想要什么？你想做什么？如果您不喜欢这种效果，可以使用.hover删除第二个图像。如果你不喜欢悬停时隐藏/显示的效果，你可以删除cssI想要在两张图片之间更改的内容。该解决方案与删除图像和删除css效果相同。我看不出有两张没有任何效果的图片有什么意义。是的，你是对的，但也许他只是简化了他的代码，而我们看不出有什么意义