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>

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

将鼠标悬停在单词上并显示相关图像

1 个答案: