css - 悬停（内容 css 标签）在 Firefox 和 IE 中不起作用

Question

我在 css 中使用了内容标签作为悬停功能，因为我为图像标签提供了一个 id。但是，悬停在 Firefox 和 IE 中不起作用，它在 chrome 中运行良好。这是此链接：thunderstorm999.byethost9.com

#explore:hover {
    content: url('images/explore-hover.png');
}
#material:hover {
    content: url('images/material-hover.png');
}
#team:hover {
    content: url('images/team-hover.png');
}
#contact:hover {
    content: url('images/contact-hover.png');
}
#merchandise:hover {
    content: url('images/merchandise-hover.png');
}

<ul class="navigation">
<li><a href="#"><img id="explore" src="images\explore.png"/></a></li>
<li><a href="#"><img id="material" src="images\material.png"/></a></li>
<li><a href="#"><img id="team" src="images\team.png"/></a></li>
<li><a href="#"><img id="contact" src="images\contact.png"/></a></li>
<li><a href="#"><img id="merchandise" src="images\merchandise.png"/></a></li>
</ul>

Answer 1

根据mozilla和w3c，css content属性应该只与:before和:after伪元素一起使用。所以最好不要在目前的情况下使用它。你可以这样做。

<li id="explore">&nbsp</li>

#explore {
background: url('http://thunderstorm999.byethost9.com/images/explore.png') center no-repeat;
}

#explore:hover {
background: url('http://thunderstorm999.byethost9.com/images/explore-hover.png') center no-repeat;
}