単語にカーソルを合わせて関連イメージを表示

Question

単語のリストを含むページを作成したいと思います。これらの言葉にカーソルを置くと、その言葉に関連する画像が表示される必要があります。私はホバープロパティについて読んだことがあり、すでにイメージテキストの関係で使っていましたが、その逆をする方法はわかりません。誰かが私にどのように表示できますか？

Answer 1

あなたはこのようにそれを行うことができます。

.red, .green, .blue { 
 
    position: relative; 
 
    text-decoration: underline; 
 
} 
 

 
img { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 20; 
 
    display: none; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.red:hover > img, 
 
.green:hover > img, 
 
.blue:hover > img { 
 
    display: block; 
 
}

<p>RGB color values are supported in all browsers.</p> 
 

 
<p>An RGB color value is specified with: rgb(<span class="red">red<img src="http://www.colorhexa.com/ff0000.png"></span>, <span class="green">green<img src="http://www.colorhexa.com/00ff00.png"></span>, <span class="blue">blue<img src="http://www.colorhexa.com/0000ff.png"></span>).</p> 
 

 
<p>Each parameter (red, green, and blue) defines the intensity of the color as an integer between 0 and 255.</p>

3つの下線付きの単語の上にマウスを移動。