1

ホバー時に div の背景画像を変更しようとしています。JaveScript でこれを実行して、クロス ブラウザーで問題なく動作するようにしたいと考えています。私が持っている現在のコードは次のとおりです。

<div class="staff" style="background-image: url(/wp-content/uploads/2013/08/IMG_1828- 300x237.png);" onmouseover="this.style.background=url(wp-content/uploads/2013/08/IMG_1836-v2-300x237.png);" onmouseout="this.style.background=url(wp-content/uploads/2013/08/IMG_1828-300x237.png);">
</div>

CSS:

.staff{
width: 300px;
height: 237px;
}

誰でも問題の原因を確認できますか?

4

8 に答える 8

1

次のように css を使用できます。

.staff{
width: 300px;
height: 237px;
background-image: url("/wp-content/uploads/2013/08/IMG_1828- 300x237.png");
}
.staff:hover{
background-image: url("wp-content/uploads/2013/08/IMG_1836-v2-300x237.png");
}

または次のようなJavaScript： onmouseover="javascript: this.style.backgroundImage = 'url(\'image_url\')'";

于 2013-08-07T10:44:59.397 に答える
0

ワーキングデモ

私が行った変更

 onmouseover="this.style.background='url()';"

URLを単一の引用符で囲む必要があります...

これを行うには、JS ではなく CSS を使用することもお勧めします。しかし、JSでそれを行う方法を尋ねたので、これがあなたの答えです

于 2013-08-07T10:37:06.330 に答える
0

ほとんどのブラウザーは:hovercss でサポートする必要があるため、これに JavaScript を使用する必要はありません(ここで関連するフィドル) :

.staff{
    width: 300px;
    height: 237px;
    background-image: url("/wp-content/uploads/2013/08/IMG_1828- 300x237.png");
}
.staff:hover{
    background-image: url("wp-content/uploads/2013/08/IMG_1836-v2-300x237.png");
}

本当に JavaScript を使用したい場合は、次url(...)のように引用符で囲む必要があります。

<div class="staff"
  style="background-image: url(/wp-content/uploads/2013/08/IMG_1828- 300x237.png);"
  onmouseover="this.style.background='url(wp-content/uploads/2013/08/IMG_1836-v2-300x237.png)';"
  onmouseout="this.style.background='url(wp-content/uploads/2013/08/IMG_1828-300x237.png);'">
</div>
于 2013-08-07T10:37:08.463 に答える