-2

8枚の画像がspriteあります。私がやりたいことはこれです: 誰かがサブメニュー リスト (アイテム 1 としましょう) の上にカーソルを置いた場合、別の div に配置されているスプライト イメージを変更する必要があります。したがって、サブメニュー項目とスプライトを含むこの div は、css によって相互に関連付けられています。問題は次のとおりです: 8 つの画像に対してこれを行うにはどうすればよいですか?

だからこれはそれです：

ホバー アイテム 1 = スプライト イメージ 1 を表示

Hover Item 2 = スプライト画像 2 を表示

Hover Item 3 = スプライト画像 3 を表示

等

4

2 に答える 2

2

div がサブメニューの子であるか、DOM の兄弟である場合は、純粋な css でのみこれを行うことができます。そうでない場合は、JavaScript を使用する必要があります。

/* child */
.submenu:hover (>) div{}
/*sibling*/
.submenu:hover ~|+ div{}

javascript を使用すると、マウスオーバー イベントをサブメニューに登録し、ハンドラ関数で画像を変更する必要があります。

document.queryselector(".submenu").addEventListener("mouseover",function(){/*stuff here*/});

最も一般的な方法は、背景の位置を変更して、スプライトの別の部分が見えるようにすることです。ただし、これを正確に行う方法は、マークアップによって異なります。

于 2012-10-15T11:00:38.593 に答える
0

background-position で解決しました。皆さんありがとう。

.page-id-1 {background: url(images/image.png) top left no-repeat; background-position: -502px 0;}
.page-id-2 {background: url(images/image.png) top left no-repeat; background-position: -904px 0;}
 .page-id-3 {background: url(images/image.png) top left no-repeat; background-position: -1306px 0;}
.page-id-4 {background: url(images/image.png) top left no-repeat; background-position: -1708px 0;}
.page-id-5 {background: url(images/image.png) top left no-repeat; background-position: 0 -71px;}
.page-id-6 {background: url(images/image.png) top left no-repeat; background-position: -402px -71px;}
.page-id-7 {background: url(images/image.png) top left no-repeat; background-position: -804px -71px;}
.page-id-8 {background: url(images/image.png) top left no-repeat; background-position: -1206px -71px;}
于 2012-10-15T13:23:04.017 に答える