2

スプライト画像を使用しています。また、スプライトの各アイコンは、ホバー効果のために同じですが異なる色をしています。アイコンにマウスオーバーすると、ホバー効果が機能します。しかし、スパンではなくdivマウスオーバーでそのホバー（画像の変更）を取得したいと思います。（スパン幅がアイコンサイズとして指定されているため、解決策が見つかりませんでした）

以下のcssとhtmlをチェックしていただければ、私が何を必要としているかお分かりいただけると思います。「each_option」divのマウスオーバーで「search_forums」（スパン）アイコンを変更したい。

前もって感謝します

CSS

.each_option{
height:30px;
border-bottom:1px solid #ffe869;
font-size:14px;
padding-top:9px;
color:#707070;}

.forumdisplay_sprite{
background-image:url(../img/forumdisplay_sprite.png);
background-repeat:no-repeat;
display:block;
text-indent:-99999px;
overflow:hidden;}

.search_forums{height:24px;width:24px;background-position:-24px -48px;}

.search_forums:hover{height:24px;width:24px;background-position:-24px -72px;}

HTML

<div class="each_option">
<span class="forumdisplay_sprite search_forums"></span>
<a href="#">Search Forums</a>
</div>

スプライト アイコン スプライト アイコン イメージ

十分に明確でなくて申し訳ありません。私の元の/以前のスタイルは、以下のページのようでした。CSS の改善と最適化に関する記事を読んだ後、スプライト画像を使用することにしました。しかし、私はこの問題を抱えています...

これが私がやりたいことです: http://jsfiddle.net/stckhlm/EXZKa/

上記の例のように、ホバー (ラッパー div の背景色と内部 div の背景画像を同時に変更) 効果を得ることができますか? そうでない場合は、スプライト画像またはホバー効果の使用を停止する必要があります...

4

2 に答える 2

1

これはあなたが求めているものですよね？

http://jsfiddle.net/j4nf4/1/

指定した画像がレンダリングされない理由がわからないため、別のスプライトが見つかりました。

なぜアンカーの上にスパンが必要なのですか? 私には意味がありませんでした。

on div ホバー効果が必要な場合は、CSS をケースに入れる必要があります。

.each-option:hover {
Your styling here

}

div、スパン、段落などのホバー状態を設定している場合は、カーソルをポインターに変更してください。cursor: pointer;これにより、ユーザーは領域/領域をクリックできることがわかります。

お役に立てれば！

于 2012-08-31T23:55:06.097 に答える
0 
.each_option:hover .search_forums{//enter your hover changes here.}

あなたが求めているものを私が理解しているかどうかは 100% わかりませんが、each_option がホバーされているときに search_forums のスタイルを変更しようとしている場合は、上記のコードでうまくいくはずです。

于 2012-08-31T22:52:42.943 に答える