Question

为什么IE不会更改我的网站上的标签a：hover的背景颜色，但是在Firefox / Chrome / Safari中是否正确？

我该怎么做才能让它在IE 6 +中运行？

HTML

<ul class="tabbernav">
<li class="tabberactive"><a title="All" href="javascript:void(null);">All</a></li>
<li class=""><a>Tab1<span class="tabTotal"> (0)</span></a></li>
<li class=""><a>Tab2<span class="tabTotal"> (2)</span></a></li>
<li class=""><a>Tab3<span class="tabTotal"> (1)</span></a></li>
</ul>

CSS

ul.tabbernav li a:hover {background:#fdfdfd; border: 1px solid #555; border-bottom: none; color:#3366a9; cursor: pointer}

Answer 1

我要做的第一件事是仔细检查psuedo选择器的顺序是否正确。

应该是 -

a:link {color:#FF0000} /* unvisited link */  
a:visited {color:#00FF00} /* visited link */  
a:hover {color:#FF00FF} /* mouse over link */  
a:active {color:#0000FF} /* selected link */

我记得唯一特定的IE悬停问题与非链接元素有关，所以我认为这不是你的问题。 http://www.bernzilla.com/item.php?id=762 - 以防万一。

如果这不能解答您的问题，您是否介意发布相关的css块？

GAH-这很难！

看起来IE正在破坏，因为链接没有关联的Href元素。解决这个问题，你应该没问题。

- 突发新闻 - 我可能是个白痴 - 这是我在测试页面上改变的最后一件事并且修复了它但是当我把它全部放回去时它到处都是它...所以采取我刚发布的内容一粒盐。我正在备份，看看发生了什么。

Answer 2

您应该在href=""标记中放置<a>属性。

这样可以正常工作。

还可以使用页面顶部的<!doctype html>标记。现在一切都会好的。

Answer 3

这是一个如此简单的修复！使用background-color：#fffffe如果改变背景颜色：#fff到背景：#fff不起作用。

http://haslayout.net/css/Hover-White-Background-Ignore-Bug

Answer 4

为<head>添加点击标记以进行修复。

for IE9

<meta http-equiv="X-UA-Compatible" content="IE=9">

for IE10

<meta http-equiv="X-UA-Compatible" content="IE=10">

Answer 5

我认为IE 7修复了除<a>以外的元素的悬停问题，但尚未测试。

为了弥补IE 6缺乏对hover选择器的支持，你只需要使用javascript来获得相同的效果。设置应用所需类的onMouseOver事件。：d

Answer 6

您的CSS看起来有效。

尝试在a：hover中添加'！important'，并尝试更改定义中的其他样式。你可能有一些其他的风格覆盖了特定的a：悬停风格通过级联。

FF中的Firebug可能会向您显示一些相互冲突的样式（虽然在IE6中你当然是自己的）但是你应该确保你没有冲突。 a：hover在IE6中运行正常，因为你和问题中的其他人都是

另外，在声明你肮脏的异教徒之后加上分号和换行符！

Answer 7

我在IE第852行收到了一个javascript错误（无效的属性值）：

document.getElementById('panel-hlisting-all').style.backgroundColor = color;

其中颜色的值为“＃ffff100”。

这可能是导致问题的原因吗？

Answer 8

现在想想 - 为什么不使用Jquery来做呢？只需几行代码即可完成。

首先，从www.jquery.com下载Jquery。然后，您应该将它正确地链接到您的HTML文件头上的文件：

<script src="url_to_your_jquery_file_here"></script>

然后，在此下面添加另一部分Javascript：

<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $("li a").hover(
          function () {
            $(this).css("color", "#3366a9");
          }, 
          function () {
            $(this).css("color","#838383");
          }
        );
    });
</script>

Answer 9

尝试添加：

display: block;
position: relative;

到您的css a。

Answer 10

我尝试了我发现的每一个解决方案。就我而言，错误是由谷歌翻译决定的。我在IE和Opera中删除它（导致其他错误），一切正常。

Answer 11

使用页面顶部的<!DOCTYPE html>。它将解决问题和可能出现的其他问题。

Answer 12

IE中的怪圈模式中的悬停元素不起作用。替代是通过html元素的脚本事件（没有jquery）设置的：

<a onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'" >  My link</a>

Answer 13

你可以在你的html文件的顶部添加以下行，它适用于我9岁及以上：

       <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Answer 14

你可以将以下行添加到你的html文件的顶部，它适用于我，即9：

       <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Answer 15

您可以在CSS中使用表达式。我使用这种技术，开发到客户的网站。

只需将它放在CSS的END上，因为Webkit浏览器不会读取它下面的任何内容。

* html * { color: expression( (function(who){ if(!who.MXPC){
 who.MXPC = '1';
 if(who.nodeName != 'A'){
  who.onmouseenter=function(){ who.className += ' hover'};
  who.onmouseleave=function(){ who.className = who.className.replace(' hover','')}; }
 (who==who.parentNode.firstChild) ? who.className += ' first-child' : '' ;
} } )(this) , 'auto') }

CSS问题：a：悬停不使用IE（需要css Ninja）

15 个答案: