0

写真を表示する簡単なhtml/cssページがあります。

ここで、ユーザーが画像上でマウスを動かしたときに、画像を他の画像に交換したいと思います。
画像領域を離れると、古い画像が再び表示されます。

どうすればこれを達成できますか？javascriptなしで動作するバージョンが最適です。

前もって感謝します！

4

3 に答える 3

6

CSSを使用して、要素にカーソルを合わせたときに要素の背景画像を変更できます。hover疑似クラスは最近のブラウザーのほとんどの要素でサポートされていますが、下位互換性を保つには（Internet Explorer 6）、機能するにはアンカータグを使用する必要がありますhover。

リンク内のonclickイベントは、クリックしても何も起こらないようにするためのものであり、ホバリング効果とは何の関係もありません。もちろん、必要に応じて、画像をクリックしたときに何かを行うことができます。

HTML：

<a href="#" id="picture" onclick="return false;"></a>

CSS：

#picture {
   display: block;
   width: 200px;
   height: 200px;
   background-image: url(firstimage.gif);
   border: none;
   text-decoration: none;
}
#picture:hover {
   background-image: url(hoverimage.gif);
}
于 2009-09-23T19:36:55.553 に答える
5

これはかなり簡潔でよく書かれているようです（注：CSSロールオーバーソリューションはIE6では機能しません）。

于 2009-09-23T19:25:17.503 に答える
1 

<img src="https://pbs.twimg.com/profile_images/677544618326556672/WID2m1_a.png" onmouseout="this.src='https://pbs.twimg.com/profile_images/677544618326556672/WID2m1_a.png'" onmouseover="this.src='https://pbs.twimg.com/profile_images/638751551457103872/KN-NzuRl.png'" alt="image" width="50px" height="50px">

于 2016-06-15T12:10:50.403 に答える