将鼠标悬停在带有链接的图像上时，CSS Sprite会出现问题 [英] Issue with CSS sprite when hovering over an image with a link

问题描述

我正在我的网站上工作，最初是使用两个单独的图像，它们的大小为210 x 210像素，用于图像链接(将鼠标悬停时会变成另一个图像.)但是我发现，首先将鼠标悬停在图片上，这显然使我感到困扰，因此我决定改用上面包含两个图片的CSS Sprite.这样我就不会闪烁.

I'm working on my website and was originally using two separate images at the size of 210 by 210px for an image link (which changes into another image when hovered over.) However I found that there was always a little flicker when first hovering over the image which obviously bothered me so I decided to switch to a CSS sprite with two the images on it instead. That way I wouldn't get the flicker.

不幸的是，我似乎无法使CSS Sprite成功运行.我正在用Wordpress BoldGrid Post和Page Builder创建网站，所以我没有做HTML/CSS，但是Customizer允许我添加自己的Custom CSS，这就是我正在做的事情.

Unfortunately, I can't seem to get the CSS sprite to work successfully. I'm creating my website in Wordpress BoldGrid Post and Page Builder so I'm not doing the HTML/CSS, but the Customizer allows me to add my own Custom CSS which is what I'm doing.

我在图像设置(在Post and Page Builder中)中为图像链接指定了CSS ID"home".这是我在自定义CSS中添加的内容:

I've given the image link the CSS ID "home" in the image settings (in Post and Page Builder). This is what I've put in my Custom CSS:

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

当前，原始图像没有变化，我可以在原始图像下方看到悬停图像(它的边框较粗，可以在下面看到).

Currently, the original image isn't budging and I can see the hover image UNDERNEATH the original image (It's border is thicker and I can see it underneath).

我一定错过了一些东西.因为我正在使用Wordpress Post and Page Builder，所以使在线跟随CSS Sprite教程变得不那么简单.希望这是一个简单的解决方法.

I must have missed something with this. Because I'm working in a Wordpress Post and Page Builder it makes following CSS Sprite tutorials online not as straightforward. Hopefully it's a easy fix.

推荐答案

:hover 使用不正确...

，您仅在元素 #home 悬停时将背景应用于 a .

by using #home:hover a you are only applying the background to the a when the element #home is hovered...

应为:

#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>

这篇关于将鼠标悬停在带有链接的图像上时，CSS Sprite会出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！