0

画像があり、マウスが通り過ぎたときに別の画像に変更したい。私には正しいように思えますが、通常のサイズ (128px x 128px) では常に大きく、別の画像の後ろに表示されます。（もう1つはz-index：1のdiv内にあります）、マウスオーバーimgのあるものはz-index：999です

ここに私のcssがあります

.class1{
    max-width:64px;
    max-height:64px;
}
.class1:hover{
    background-image:url(http://img195.imageshack.us/MOUSEOVER_IMAGE.png);
    width:64px;
    height:64px;
    z-index:999;
    background-position:top center;

そして、これが私のイメージです

<a href="http://mylink"><img class=class1 src="http://imageshack.us/NORMAL_IMAGE.png" alt="some text here" /></a>
4

3 に答える 3

1

ここで起こっているいくつかの問題があります。Tobasが述べたように、リンクで背景画像を使用していますが、それでもimageの子要素があります。z-indexは、親要素の背景を子要素の上に表示しません。

したがって、いくつかのオプションがあります。

1：ホバー時に画像の不透明度を0に変更します。

img.class1:hover { opacity: 0 }

そして、背景画像にbackground-sizeを使用します。

a:hover {
  background: url(...);
  background-size: 64px 64px;
 }

2：子画像を完全に削除し、画像をリンクの背景として交換します。これは、画像に意味的な値がない場合に意味があります。

a { background: url(image1.png); }

 a:hover { background: url(image2.png); }

3：画像自体をjavascript / jqueryと交換します：

 $('img.class1').hover(function(){
    $(this).attr('src','image2.png');
 }
于 2012-07-03T13:35:21.383 に答える
1

画像の背景を変更しています。不透明度を 0 に変更しない限り、背景は表示されません。

画像を削除して、クラスに a-tag を付けることをお勧めします。さらに、image-src を通常の背景として指定します。

.class1{
display:block;
background-image:url(...);
...}
.class:hover{...}

そしてあなたのリンク<a href="http://mylink" class="class1">&nbsp;</a>

于 2012-07-03T13:25:09.153 に答える
0

以下のプロパティを (プロパティを含むクラス/タグ/div に) 追加することを忘れないでくださいbackground-image。そうしないと、場合によっては繰り返されます。

{
  background-size: contain;
  background-repeat: no-repeat
}
于 2013-07-06T19:04:16.347 に答える