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：悬停不工作

来源

2010-05-28 Babiker

我认为有这些div的设置为内联可能会导致任何意外的行为。但是我不能肯定地说，因为除了你的代码之外，你还没有真正提出任何问题或提供任何信息。 – 2010-05-28 03:08:46

D_N：在（至少）Firefox中，悬停没有效果。斯科特：我试图删除显示：内联，并没有改变任何东西。看起来这是选择器的问题。 – 2010-05-28 03:22:07

如果这是一个导航栏，最好只使用一个链接列表（其更多的语义这样），所以你的悬停也适用于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. 
}

也有提示：尝试使用“格”作为类名称的一部分，不要。它在语义上不是那么有帮助/描述性的:)

来源

2010-05-28 03:05:54 corroded

即使在查找定义时，我发现“语义”一词在很长一段时间内都令人困惑。为什么我们不能只用“标签”，“班级命名”或类似的词呢？ – 2017-07-03 20:27:33

作品。你在IE中测试，其中:hover只适用于a元素？

编辑：我在Firefox中测试，并没有在那里工作（虽然在Opera中工作）。使用div.header_innerHeaderDivs修复它...也许你不能在类上使用伪选择器？它虽然有效;可能是一个浏览器错误。

来源

2010-05-28 03:02:03

您可以试试：

#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过渡变种。

来源

2010-05-28 03:04:29 edl

这会起作用，但不是扩展#headerDiv以及填充，而是扩展内部div，就像它们具有更高的z-index一样。 – Babiker 2010-05-28 03:07:56

我认为内联块在IE中不起作用。可能是错的。 – 2010-05-28 03:20:15

@crimson_penguin我认为你是对的。反正IE6和IE7。我认为IE8会支持它。 – edl 2010-05-28 03:29:27

如果您将doctype切换为XHTML transitional或更高版本，它将起作用。 IT也可能与HTML严格一起工作，尽管我没有尝试过。虽然你想使用a标签作为一个普通的标签，除非你通过js甚至处理程序来指定动作。

来源

2010-05-28 03:07:24 prodigitalson

如果您使用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，但这是一个选项。

来源

2015-01-07 22:18:27 nurdyguy

我也一直有这个问题。看起来div中的所有内容都在:hover之间变化，但不是div本身。所以你可以有一个包装div影响:hover。

<div class="hoverChange"><div class='header_innerHeaderDivs'>Comapny</div></div>

然后是CSS

.hoverChange :hover{ 
    padding: 4px; 
}

来源

2016-11-03 12:42:27 edo4hy

CSS：悬停不工作

回答

相关问题