Html CSS：悬停不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2926405/
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 :hover not working
提问by Babiker
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type='text/css'>
#body{
margin:0px;
}
#headerDiv{
background-color:#e0e2eb;
}
.header_innerHeaderDivs{
border:solid 1px gray;
display:inline;
font:normal 11px tahoma;
color:black;
}
.header_innerHeaderDivs:hover{
padding:4px;
}
</style>
</head>
<body id='body'>
<div id='headerDiv'>
<div class='header_innerHeaderDivs'>Comapny</div>
<div class='header_innerHeaderDivs'>Edit</div>
<div class='header_innerHeaderDivs'>Inventory</div>
<div class='header_innerHeaderDivs'>Logout</div>
</div>
</body>
</html>
Using FireFox 3.6.3
使用火狐 3.6.3
回答by edl
You might try:
你可以试试：
#headerDiv div:hover{padding:4px;}
#headerDiv div:hover{padding:4px;}
EDIT:
编辑：
If you want the parent div to expand set display of .header_innerHeaderDivs to inline-block. Also, as mentioned above, you might want to set your dtd declaration to:
如果您希望父 div 将 .header_innerHeaderDivs 的设置显示扩展到 inline-block。此外，如上所述，您可能希望将 dtd 声明设置为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
or the html4.01 transitional variant.
或 html4.01 过渡变体。
回答by corroded
if that is a nav bar, it's better to just use a list of links(its more semantic that way) so your hover also works in ie( :hover only works for a elements in ie)
如果这是一个导航栏，最好只使用一个链接列表（这样更语义化）所以你的悬停也适用于 ie（:hover 只适用于 ie 中的元素）
<ul id='header-nav'>
<li><a>Comapny</a></li>
<li><a>Edit</a></li>
<li><a>Inventory</a></li>
<li><a>Logout</a></li>
</ul>
then
然后
#header-nav {
background-color:#e0e2eb;
}
#header-nav a {
border:solid 1px gray;
display:inline;
font:normal 11px tahoma;
color:black;
}
#header-nav a:hover {
padding: 4px.
}
also a tip: try to refrain from using "div" as part of a class name. it's not that helpful/descriptive in semantics :)
还有一个提示：尽量避免使用“div”作为类名的一部分。它在语义上没有那么有用/描述性:)
回答by edo4hy
I have been having this issue as well. It seems that everything within the divchanges in :hoverbut not the divitself. So you can have an encasing divwhich affects the :hover.
我也一直有这个问题。似乎内在的一切都在div变化，:hover而不是它div本身。所以你可以有一个div影响:hover.
<div class="hoverChange"><div class='header_innerHeaderDivs'>Comapny</div></div>
And then the css
然后是css
.hoverChange :hover{
padding: 4px;
}
回答by crimson_penguin
Works in Safari. Are you testing in IE, where :hoveronly works on aelements?
在 Safari 中工作。您是否在 IE 中进行测试，其中:hover仅适用于a元素？
EDIT: I tested in Firefox, and it doesn't work there (works in Opera though). Using div.header_innerHeaderDivsfixes it... Maybe you can't use pseudo-selectors on just classes? It is valid though; might be a browser bug.
编辑：我在 Firefox 中进行了测试，但它在那里不起作用（尽管在 Opera 中有效）。使用div.header_innerHeaderDivs修复它......也许你不能只在类上使用伪选择器？虽然它是有效的；可能是浏览器错误。
回答by prodigitalson
If you switch the doctype to XHTML transitional or above it works. IT might also work with HTML strict as well though i didnt try that. As a general ruel though you want to use atags for hovers unless you are dictating the action via a js even handler.
如果您将 doctype 切换到 XHTML 过渡或更高版本，它就可以工作。虽然我没有尝试过，但它也可能适用于严格的 HTML。作为一般规则，尽管您想使用a标签进行悬停，除非您通过 js 偶数处理程序指示操作。
回答by nurdyguy
If you are using IE then you'll need to add <!DOCTYPE html>to the top. Otherwise IE is extra picky and will only recognize :hoveron anchor tags.
如果您使用的是 IE，那么您需要添加<!DOCTYPE html>到顶部。否则 IE 会特别挑剔，只会识别:hover锚标签。
EDIT: Non-CSS alternative (using jQuery .bind):
编辑：非 CSS 替代（使用 jQuery .bind）：
<script>
$('.header_innerHeaderDivs').bind('mouseenter',
function(event){
$(event.target).css('background-color', 'yellow');
});
$('.header_innerHeaderDivs').bind('mouseleave',
function(event){
$(event.target).css('background-color', 'blue');
});
</script>
I wouldn't put it in a script tag in the middle of your html file as in the code block (better off in a js file) but you get the idea. I'd rather use pure CSS myself, but this is an option.
我不会像在代码块中那样将它放在 html 文件中间的脚本标记中（最好放在 js 文件中），但您明白了。我宁愿自己使用纯 CSS，但这是一个选项。
