0

このコードは、ページの上部 50px と次の下部 50px に (ホバリングの目的で) 2 つのリンクされた領域を作成することを目的としています。マウスを垂直に動かすと、2 つのホバーがヒットし、img横方向にシフトします。

<html>
<head>
<style type="text/css">
a {display:block; left:0; height:50px; width:300px;}
a#a1{top:50;}
a#a2{top:100;}
a img {position: absolute; top:0; left:0; width:300px;}
a#a1 img:hover {left: 50px;}
a#a2 img:hover {left: 100px;}
</style>
</head>

<body>
<a id="a1" /><a id="a2" /><img src="smiley.gif" />
</body>
</html>

背景画像を再配置するか、画像マップを使用して、これを達成しても問題ありません。

imgリンクのホバーが画像の一部にのみ発生するように、リンク ( を含む) のサイズを変更するにはどうすればよいですか?

4

2 に答える 2

0

タグの背景にスプライト画像を表示するとよいでしょう。例：

.read {
        background: url('../../img/home/home-assets.png')no-repeat  0 0;
    }
.read:hover {
        background: url('../../img/home/home-assets.png')no-repeat  0 -50px;
    }

cssで背景位置を定義する必要があります。詳細については、次をお読みください：http : //www.ehousestudio.com/blog/view/css_sprite_navigation_tutorial、http: //css-tricks.com/css-sprites/

于 2011-03-02T04:26:58.797 に答える
0

1 つには、img 要素は、a#a1 img:hoverまたはa#a2 img:hoverimg がいずれの a タグにもネストされていないため、選択されません。別の例として、画像自体以外の要素にカーソルを合わせて画像をシフトする場合がありますが、これは私の知る限り、CSS だけで行うことはできません。おそらく、この種の機能には JavaScript を使用したいと思うでしょう。

于 2011-03-02T03:26:48.803 に答える