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

我有一个跨度，我只想在光标悬停在它上面时显示。要查看我期望的内容，请删除“href”属性并在非IE浏览器中尝试使用它。IE怪癖模式a：悬停式问题

<!-- <!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放入怪癖模式。在这种模式下，除了锚点包含“href”属性，IE a：hover无法与列出的CSS（可见性更改器）一起使用。

但是，通过添加“href”IE，浏览器将使用浏览器的默认锚点样式覆盖span的样式。在我的应用程序，该div容器可以有动态的风格使得它很难过过写锚的风格......

所以我的问题是：

1）我只能怪癖模式下工作。无论如何，我不需要使用href属性就能以我想要的方式获得悬停行为吗？

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

我真的希望不要为此编写脚本，但如果有任何脚本解决方案，请让知道！

谢谢大家提前。

来源

2012-01-28 Viele

'button.onMouseOver =函数（）{的document.getElementById（ “thespan”）的style.display = '内联'。 }; button.onMouseOut = function（）{document.getElementById（“thespan”）。style.display ='none'; };' – Tim 2012-01-28 00:18:29

什么是没有href属性的锚？通常你只会这样做来标记页面中的位置（带有ID），这通常不会显示。 – animuson 2012-01-28 00:19:55

尝试将name属性添加到您的'a'标签。在HTML4中，标签必须具有href或name属性，所以我只能猜测你的'a'实际上只是作为一个普通的'div'显示，直到添加了所需的属性。尝试在您的样式中添加'！important'并查看这是否足以覆盖默认值。 – lpd 2012-01-28 00:22:16

尝试

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

包括例如http://jsfiddle.net/gHKsY/4/

来源

2012-01-28 00:26:47

这不完全是我所需要的。当光标不在其上时，锚点必须完全不可见。 – Viele 2012-01-28 02:27:42

这很好，只需在背景上将背景设置为透明：} – 2012-01-28 02:30:53

只使用颜色，以便测试。 – 2012-01-28 02:31:04

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

回答

相关问题