html - HTML と CSS - DIV にカーソルを合わせると少し移動します

Question

HTML + CSS で奇妙な動作があります: 画像にカーソルを合わせると、画像が少し動きます (Chrome と 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/

前もって感謝します！

Answer 1

これを css に追加します。

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

こちらをご覧ください：http://jsfiddle.net/LmMSH/2/

編集：

ユーザーがカーソルを合わせたときに画像を変更したい場合は、次のdivcss を使用します。

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/

Answer 2

これを試して：

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

Answer 3

このCSSも与えてください

div{height:60px}