1

HTML

<img id="btnLeft" src="img/btnLeft.png"/>
<img id="logo01" src="img/logo01.png"/>

CSS

#btnLeft{heigth:64px;}
#btnLeft:hover{height:74px;}

マウスオーバーで 10px 押し下げますbtnLeft。 その場にいたい。#logo01
#logo01

4

2 に答える 2

2

画像要素用に個別のdivを作成し、好みに応じて左または右にフロートさせてvertical-align: topから、含まれているでuseを使用しますdiv。次に例を示します：http：//jsfiddle.net/94zVg/。

この問題の理由は、含まれているブロックの下部に位置合わせされる要素を並べて画像化する必要があるためです。1つの画像を拡大すると、含まれているブロックが拡大され、もう1つの要素が下降してその下部に貼り付けられます。フローティングと垂直方向の位置合わせにより、この問題が解決します。

于 2012-11-29T12:07:40.763 に答える
1

最初の画像にも幅を指定します。そうしないと、幅が比例して拡大し、隣接する画像が押し下げられます。

#btnLeft{height:64px;width:100px;}
#btnLeft:hover{height:74px;}

明示的な幅のデモを次に示します：http：//jsfiddle.net/XRKK4/

明示的な幅のないデモンストレーションは次のとおりです：http：//jsfiddle.net/XRKK4/1/

于 2012-11-29T12:08:15.427 に答える