Html CSS 问题：a:hover 不适用于 IE（需要 css Ninja）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1291309/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS issue: a:hover not working with IE (css Ninja needed)
提问by TimJK
Why does IE not change the background color on my site for tabs a:hover but does so in Firefox/Chrome/Safari correctly?
为什么 IE 没有更改我网站上标签 a:hover 的背景颜色，但在 Firefox/Chrome/Safari 中却正确地这样做了？
What can I do to make it work in IE 6+?
我该怎么做才能让它在 IE 6+ 中工作？
HTML
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
CSS
ul.tabbernav li a:hover {background:#fdfdfd; border: 1px solid #555; border-bottom: none; color:#3366a9; cursor: pointer}
采纳答案by Kelly Gendron
First thing I'd do is double check that the order of the psuedo selectors is correct.
我要做的第一件事是仔细检查伪选择器的顺序是否正确。
It should be-
它应该是-
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 */
The only specific IE hover issue I remember relates to non-link elements so I don't think that is your issue. http://www.bernzilla.com/item.php?id=762- Just in case.
我记得的唯一特定的 IE 悬停问题与非链接元素有关，所以我认为这不是您的问题。http://www.bernzilla.com/item.php?id=762- 以防万一。
If that doesn't answer your question do you mind posting the related block of css?
如果这不能回答您的问题，您介意发布相关的 css 块吗？
GAH- That was a hard one!
GAH-那太难了！
It looks like IE is breaking because the links don't have an associated Href element. Fix that and you should be fine.
看起来 IE 正在中断，因为链接没有关联的 Href 元素。解决这个问题，你应该没问题。
--Breaking News - I may be an idiot- That was the last thing I changed on my test page and that fixed it but when I put it all back together it broke everywhere... so take what I just posted with a grain of salt. I'm backing up to see what happened.
--突发新闻-我可能是个白痴-那是我在测试页面上更改的最后一件事并修复了它，但是当我把它们全部放回原处时，它到处都坏了......所以拿我刚刚发布的内容盐。我正在备份，看看发生了什么。
回答by thinzar
You should place href=""attribute in <a>tag.
您应该将href=""属性放在<a>标签中。
This will work fine.
这将正常工作。
Also use the <!doctype html>tag at the top of the page. Now everything will be fine.
还可以使用<!doctype html>页面顶部的标签。现在一切都会好起来的。
回答by Johan De Silva
This is such a simple fix! Use background-color:#fffffe if changing background-color:#fff to background:#fff does not work.
这是一个如此简单的修复！如果将 background-color:#fff 更改为 background:#fff 不起作用，请使用 background-color:#ffffffe。
回答by DLF
Try adding:
尝试添加：
display: block;
position: relative;
to your css a.
到你的 css a。
回答by ali bagheri
Add blow tag to <head>for fix it.
添加打击标签以<head>修复它。
for IE9
对于 IE9
<meta http-equiv="X-UA-Compatible" content="IE=9">
for IE10
对于 IE10
<meta http-equiv="X-UA-Compatible" content="IE=10">
回答by Bruno Schweller
Just thought of it now - why not use Jquery to do it? with just a FEW lines of code you will have it done.
现在才想到——为什么不使用 Jquery 来做呢？只需几行代码，您就可以完成。
First, download Jquery from www.jquery.com. Then, you should properly link it to your file, on the head of your HTML:
首先，从www.jquery.com下载 Jquery 。然后，您应该将其正确链接到您的文件，位于 HTML 的头部：
<script src="url_to_your_jquery_file_here"></script>
Then, add another part of Javascript below this one:
然后，在这个下面添加 Javascript 的另一部分：
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("li a").hover(
function () {
$(this).css("color", "#3366a9");
},
function () {
$(this).css("color","#838383");
}
);
});
</script>
回答by Hatzegopteryx
I tried every solution I found. In my case, the bug was determined by the Google Translator. I removed it in IE and Opera (where it causes other errors) and everything works just fine.
我尝试了我找到的所有解决方案。就我而言，该错误是由Google Translator确定的。我在 IE 和 Opera 中删除了它（它会导致其他错误），一切正常。
回答by Jeight
Use <!DOCTYPE html>at the top of the page. It will fix the problem and other problems that may arise.
<!DOCTYPE html>在页面顶部使用。它将解决问题和其他可能出现的问题。
回答by lison
Hover element in quirk mode in IE doesn't work. Alternative is set via script-event (without jquery) of html element:
IE 中的 quirk 模式下的悬停元素不起作用。替代方案是通过 html 元素的脚本事件（没有 jquery）设置的：
<a onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'" > My link</a>
回答by Alireza815
you can add following line to the top of your html file, it works for me in is 9 and up:
您可以将以下行添加到 html 文件的顶部，它适用于我 9 及更高版本：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
