如何使用 HTML 和 CSS 创建链接图像悬停？答案

【问题标题】：How can I use HTML & CSS to create a link image hover?如何使用 HTML 和 CSS 创建链接图像悬停？
【发布时间】：2019-08-07 13:37:41
【问题描述】：

我想要一行文本在悬停时显示一个图像的弹出窗口。最好只使用 html 和/或 css。我正在使用电子商务模板购物车软件。当我尝试对此进行编码时，我的图像已自动显示在我的网页上。它不应该在文本悬停之前显示。

我尝试了通过谷歌搜索找到的代码。我不确定模板是否是代码无法正常工作的原因。

a img {
  display: none;
}

a:hover img {
  display: block;
}

<li>
  <a href="#">Hover
    <img src="https://via.placeholder.com/150"/>
    </a>
</li>

我希望能够悬停文本并弹出图像，直到我不再将鼠标悬停在文本上。

【问题讨论】：

我已将您的代码放入带有示例图像的 sn-p 中，它似乎运行良好...您在尝试您的代码时是否有任何控制台错误？或者您是否有另一个与您当前的 CSS 冲突的 CSS 文件
用 devtools 检查你的图片，看看是什么 CSS 规则显示的
它对我来说也很好用（Firefox 68.0.1）

【解决方案1】：

您需要在要悬停的元素内设置图像不显示，而不是使用此选择器a:hover .onlyHover 设置显示块，这意味着：在悬停的 url 内的元素上设置显示块，您可以更改 a：悬停在特定类上，例如 .youClass:hover .onlyHover

查看代码sn-p：

.onlyHover{
  display:none;
}

a:hover .onlyHover{
  display:block;
}

<a href="#">HOVER TO SEE
  <div class="onlyHover">
    <img src="https://placeimg.com/640/480/any">
  </div>
</a>

【讨论】：