css - CSS OnHover テキスト、画像を表示する必要があります

Question

「ここ」のような単語が欲しいのですが、その上にカーソルを合わせると、その単語の上に画像が表示されるはずです。ホバー時に画像を置き換える方法や何か他のことをする方法をたくさんのコードで見つけましたが、そのようにしたいのです:テキストの上で、背景のスタイルが邪魔されてはいけません。

Answer 1

これがそのサンプルです。

<div class="here">Here</div>
<img src="link/to/file.png" class="image" alt="photo" style="display: none;" />

これには jQuery コードが必要です。CSS を使用してこれを行うことはできません。

$('.here').hover(function () { // on hover
   $('.image').show(); // show the image..
}

残りは、次のような CSS を使用して適用されます。

position: absolute;
top: 0;

また、他のすべての CSS プロパティは画像に直接適用できますが.show()、jQuery を使用してその画像を表示すると、CSS でそれを行うことはできません。