如何在原始网页上的文本翻转上显示图像

Question

我正在尝试创建一个简洁的界面，它是一个文本列表，当悬停时，该项目的图像将显示在文本下方。 我已经看到很多图像出现在鼠标上，但我真的希望图像在悬停时显示在实际的网页上。

这是我正在追求的内容的简要图表

Answer 1

你可以用CSS状态来做，举个简单的例子：

.rolloverImage {
    display:none;
}
.rolloverImage:hover {
    display:block;
}

<img class="rolloverImage" ... />

这会隐藏应用类的元素，并在鼠标悬停时显示它，但我们可以调整它来隐藏元素，并显示 else 的某些内容悬停在：

.rollover img {
    display:none;
}
.rollover:hover img {
    display:block;
}

<span class="rollover">
  <!-- some none hidden text here -->
  <img ... />
</span>

如果没有当前设置的详细信息，这可能不仅仅是您的工作;但原则很简单：通过<link />在您的网页中加入您的样式表（假设您已经有一个，如果没有，则创建一个）;相应地实现您的样式然后将class应用于相关元素。

这是原始的，而不是一个完整的例子，显然，你需要使用它来获得所需的输出（例如，是否显示为block，inline-block，或者绝对位置等。）