html - 仅悬停css时如何在背景图像之间切换？

Question

我有两个文本图像。一个具有常规文本，另一个具有相同的文本但具有发光效果。问题是我希望在悬停时发光图像替换常规图像。但是除了常规图像之外，还会出现发光图像。请帮忙！！提前thanx 这里是代码... background-image属性位于注释块中，因为常规文本图像被定义为img src int html文件

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