Question

我在css中使用了内容标记用于悬停功能，因为我已经为图片标记提供了id。但是，on Hover在Firefox和IE中无效，并且它在chrome中工作正常。以下是此链接：thunderstorm999.byethost9.com

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

根据mozilla和w3c，css 内容属性应仅与：之前和一起使用：在伪元素之后。所以最好不要在目前的情况下使用它。你可以改为this。

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

On Hover（内容css标记）在Firefox和IE中不起作用

1 个答案: