IE怪癖模式a：hover样式问题
我有一个跨度，只想在光标悬停在其上时显示。要了解我的期望，请删除“href”属性并在非 IE 浏览器中尝试。
<!-- <!DOCTYPE html> -->
<html>
<head>
<style>
.container {
color: orange;
}
a.anchor {
text-decoration:none;
display: inline-block;
cursor: default;
}
a.anchor:hover span {
visibility: visible;
}
a.anchor span {
visibility: hidden;
}
</style>
</head>
<body>
<div class="container">
<a class="anchor" href="#">
<span>XXXXXXXXX</span>
</a>
</div>
</body>
</html>
请注意，文档类型已被注释掉，以使 IE 进入怪异模式。在此模式下，IE a:hover 不适用于列出的 CSS（可见性更改器），除非锚点包含“href”属性。
但是，通过添加“href”，IE 会使用浏览器默认锚点样式覆盖跨度的样式。在我的应用程序中，容器 div 可以具有动态样式，从而很难过度写入锚点的样式...
所以我的问题是：
1）我只能使用怪异模式。无论如何，我是否可以在不使用 href 属性的情况下以我想要的方式获得 :hover 行为？
2）如果上一个问题的答案是否定的，那么删除所有浏览器默认锚点样式的最佳方法是什么？
我真的希望不要为此编写脚本，但如果有任何脚本解决方案，请告诉我们！
预先感谢大家。
I have a span that I only want to show when the cursor hovers over it. To see what I expect please remove the "href" attribute and try it in a non-IE browser.
<!-- <!DOCTYPE html> -->
<html>
<head>
<style>
.container {
color: orange;
}
a.anchor {
text-decoration:none;
display: inline-block;
cursor: default;
}
a.anchor:hover span {
visibility: visible;
}
a.anchor span {
visibility: hidden;
}
</style>
</head>
<body>
<div class="container">
<a class="anchor" href="#">
<span>XXXXXXXXX</span>
</a>
</div>
</body>
</html>
Note that the doctype is commented out to put IE into quirks mode. In this mode, IE a:hover does not work with the listed CSS (visibility changer) UNLESS the anchor contains a "href" attribute.
However, by adding "href" IE overwrites the span's style with the browsers default anchor styles. In my app, the container div could have dynamic styles making it hard to over-over-write the anchor's style...
So my questions are:
1) I can only work with quirks mode. Is there anyway for me to get the :hover behavior the way I wanted without using the href attribute?
2) If the answer to the previous question is no, what is the best way to remove all the browser default anchor styles?
I am really hoping to not write script for this, but if there is any script solution please do let know!
Thanks everyone in advance.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
尝试
包含示例 http://jsfiddle.net/gHKsY/4/
Try
included example http://jsfiddle.net/gHKsY/4/