将鼠标悬停在带有 link 的图像上时 CSS 精灵出现问题

Question

我正在我的网站上工作，最初使用两张大小为 210 x 210 像素的单独图片作为图片 link（悬停时会变成另一张图片。）但是我发现那里第一次将鼠标悬停在图像上时总是有点闪烁，这显然让我很困扰，所以我决定切换到一个 CSS 精灵图，上面有两个图像。这样我就不会闪烁了。

不幸的是，我似乎无法使 CSS 精灵成功运行。我在 Wordpress BoldGrid Post 和 Page Builder 中创建我的网站，所以我没有做 HTML/CSS，但定制器允许我添加我自己的自定义 CSS，这就是我的我在做。

我在图像设置中（在 Post 和 Page Builder 中）为图像 link 指定了 CSS ID "home"。这是我在自定义 CSS:

中放入的内容

#home:hover a  {
background:url(https://www.mywebsite.com/hoverimage.png);
position: absolute;
background-position: -210px 0;
}

目前，原始图像没有变形，我可以在原始图像下方看到悬停图像（它的边框较粗，我可以在下方看到它）。

我一定是漏掉了什么。因为我在 Wordpress Post 和 Page Builder 中工作，所以在线学习 CSS Sprite 教程并不那么简单。希望这是一个简单的修复。

Answer 1

:hover 使用不当...

通过使用 #home:hover a，您仅在悬停元素 #home 时将背景应用到 a...

应该是：

#home a  {
  background:url(https://www.mywebsite.com/hoverimage.png);
  position: absolute;
}
#home:hover a  {
  background-position: -210px 0;
}

如下所示：

#home a img {
  display: none;
}
#home a  {
  background:url("https://via.placeholder.com/420x210");
  position: absolute;
  width: 210px;
  height: 210px;
  display: block;
}
#home:hover a  {
  background-position: -210px 0;
}

<div id="home">
  <a href="#">
    <img src="https://via.placeholder.com/210x210?text=original%20image">
  <a>
</div>

将鼠标悬停在带有 link 的图像上时 CSS 精灵出现问题

Issue with CSS sprite when hovering over an image with a link

css

wordpress

hover