Question

我有两张文字图片。一个具有常规文本，另一个具有相同的文本但具有发光效果。事情是我希望发光图像在悬停时替换常规的。但是，辉光图像会在添加中显示为常规图像。请帮忙！！提前这里是代码... background-image 属性位于注释块中，因为常规文本图像被定义为html文件中的img src

#groundPlainLink
{
height:56px;
width: 170px;
margin-left:476px;
float:left;
/*background-image:url("../images/txt_menu_ground_plane_pc.png");*/
}
#groundPlainLink:hover
{
background-image: url("../images/txt_menu_ground_plane_glow_pc.png"); 
}

Answer 1

此外，它还会出现，因为IMG元素会在背景图像上方呈现。为什么不直接使用CSS，并跳过IMG元素？

Answer 2

您必须在悬停时隐藏图像。

#groundPlainLink img:hover { opacity:0; }

但是，如上所述，删除img并依赖背景图像会更容易，更简单。

编辑：或者，设置元素的样式而不是div元素，然后将文本放在链接中font-size:0。那就是你正在寻找的东西，并且仍然适合屏幕阅读器/可访问性/ SEO。

Answer 3

小提琴

https://jsfiddle.net/Hastig/jd23mcnx/

HTML

<a class="image-link">
    <img class="image-default" src="http://i.imgur.com/c0lfxLU.png">
    <img class="image-hover" src="http://i.imgur.com/yfNIfVR.jpg">    
</a>

CSS

.image-link {
    display: block;
    width: 500px;
    margin: 20px auto 0px auto;
}

.image-link img {
    width: 500px;    height: 300px;
}

.image-hover {
    display: none;
}

.image-link:hover .image-default {
    displaY: none;
}

.image-link:hover .image-hover {
    display: block;
}

如何仅在悬停css时切换背景图像？

3 个答案: