Question

我有一个跨度，我只想在光标悬停在它上面时显示。要查看我的期望，请删除“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>

请注意，doctype被注释掉以使IE进入怪癖模式。在此模式下，IE a：hover不适用于列出的CSS（可见性更改器），除非锚包含“href”属性。

但是，通过添加“href”，IE会使用浏览器默认锚样式覆盖span的样式。在我的应用程序中，容器div可能具有动态样式，因此难以覆盖锚点的样式......

所以我的问题是：

1）我只能使用怪癖模式。反正我有没有使用href属性来获得：我想要的悬停行为？

2）如果上一个问题的答案为否，删除所有浏览器默认锚样式的最佳方法是什么？

我真的希望不为此编写脚本，但如果有任何脚本解决方案，请告诉我们！

提前感谢大家。

Answer 1

尝试

    a.anchor:hover span {
        display: inline-block;
    }
    a.anchor span {
        display: none;
    }

包含示例http://jsfiddle.net/gHKsY/4/

IE怪癖模式a：悬停样式问题

1 个答案: