CSS:悬停不工作
<!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>
在Safari中使用Firefox 3.6.3CSS:悬停不工作
如果这是一个导航栏,最好只使用一个链接列表(其更多的语义这样),所以你的悬停也适用于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>
然后
#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.
}
也有提示:尝试使用“格”作为类名称的一部分,不要。它在语义上不是那么有帮助/描述性的:)
即使在查找定义时,我发现“语义”一词在很长一段时间内都令人困惑。为什么我们不能只用“标签”,“班级命名”或类似的词呢? – 2017-07-03 20:27:33
作品。你在IE中测试,其中:hover
只适用于a
元素?
编辑:我在Firefox中测试,并没有在那里工作(虽然在Opera中工作)。使用div.header_innerHeaderDivs
修复它...也许你不能在类上使用伪选择器?它虽然有效;可能是一个浏览器错误。
您可以试试:
#headerDiv div:hover{padding:4px;}
编辑:
如果您希望父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">
或HTML4.01过渡变种。
如果您将doctype切换为XHTML transitional或更高版本,它将起作用。 IT也可能与HTML严格一起工作,尽管我没有尝试过。虽然你想使用a
标签作为一个普通的标签,除非你通过js甚至处理程序来指定动作。
如果您使用IE,那么您需要将<!DOCTYPE html>
添加到顶部。否则IE是额外挑剔的,只会在锚标签上识别:hover
。
编辑: 非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>
我不会把它放在一个脚本标记,在HTML文件中,如代码块(更好在一个js文件中),但你明白了。我宁愿自己使用纯CSS,但这是一个选项。
我也一直有这个问题。看起来div
中的所有内容都在:hover
之间变化,但不是div
本身。所以你可以有一个包装div
影响:hover
。
<div class="hoverChange"><div class='header_innerHeaderDivs'>Comapny</div></div>
然后是CSS
.hoverChange :hover{
padding: 4px;
}
我认为有这些div的设置为内联可能会导致任何意外的行为。但是我不能肯定地说,因为除了你的代码之外,你还没有真正提出任何问题或提供任何信息。 – 2010-05-28 03:08:46
D_N:在(至少)Firefox中,悬停没有效果。 斯科特:我试图删除显示:内联,并没有改变任何东西。看起来这是选择器的问题。 – 2010-05-28 03:22:07