html - 将鼠标悬停在一个词上并显示相关图像

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>

将鼠标悬停在三个带下划线的词上。