0

我在 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>

你可以在这里看到：http: //jsfiddle.net/LmMSH/

提前致谢！

4

3 回答 3

2

将此添加到您的CSS：

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

在这里看到它：http: //jsfiddle.net/LmMSH/2/

编辑：

如果您想在用户悬停时更改图片，请div使用此 css：

img.image{
    display: block;
}

img.hover{
    display: none;
}

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

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

http://jsfiddle.net/LmMSH/11/

于 2013-10-08T06:40:02.453 回答
0

尝试这个：

div.effect img.image {
    float: left;
}
于 2013-10-08T06:45:40.693 回答
0

也给这个 CSS

div{height:60px}
于 2013-10-08T06:46:42.327 回答