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

南笙酒味 提交于 2021-02-11 17:02:17

问题


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.

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.

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).

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.


回答1:


:hover is being used incorrectly...

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

it should be:

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

Something like below:

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


来源:https://stackoverflow.com/questions/60106051/issue-with-css-sprite-when-hovering-over-an-image-with-a-link

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!