CSS :hover不起作用

Question

CSS :hover不起作用

5

<!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>

使用 FireFox 3.6.3

- Babiker

1

我认为将这些div设置为inline可能会导致任何不良行为。但是，由于您实际上没有提出问题或提供除代码以外的任何信息，所以我不能确定。 - Scott Christopherson

D_N: (至少)在Firefox中:hover没有效果。 Scott: 我尝试删除display:inline，但没有改变任何东西。看起来这是选择器的问题。 - crimson_penguin

8个回答

3

如果那是导航栏，最好只使用链接列表（这样更符合语义），这样您的悬停在IE中也会起作用（:hover仅对IE中的a元素起作用）。

<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.
}

另外一个提示：尽量避免在类名中使用“div”。在语义上并不是很有帮助/描述性的。

- corroded

我很长一段时间都觉得“语义”这个词很难理解，即使我查了定义也是如此。为什么我们不能只使用“标记”，“分类命名”或类似的词呢？ - Alex Banman

3

我也遇到了这个问题。似乎在:hover中，div内的所有内容都会发生变化，但是div本身不会。因此，您可以有一个外围的div来影响:hover。

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

然后是CSS。

.hoverChange :hover{
    padding: 4px;
}

- edo4hy

1

对于我来说，这与CSS的特异性有关。在添加!important后它可以正常工作。

- user2298124

0

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

- nurdyguy

0

提到一个可能不在其他答案中涵盖的情况，Firefox中悬停工作不一致的一个可能原因是存在一个mouseover事件监听器，该监听器重新排列DOM中的悬停元素，例如使用appendChild。在移除后立即添加元素会导致元素失去悬停状态，而Chrome会恢复悬停状态（只要光标仍然指向该元素），但Firefox不会。

如果您遇到这种情况，可能的解决方案包括：

- 使用鼠标事件模拟触发:hover - 添加/删除一个类（如.hover）而不是使用:hover - 不移动元素，而是移动其兄弟元素。

显然，mouseover不是问题代码片段中的问题，但这个答案对于像我这样寻找Firefox中悬停行为异常的可能情况的人可能会有用。

在Chrome 118、Firefox 114和macOS 13.6上进行了测试。

- Akseli Palén

0

在Safari中可以正常工作。您是在IE中测试吗？因为:hover只能在a元素上起作用。

编辑：我在Firefox中测试了一下，它在那里无法工作（但在Opera中可以）。使用div.header_innerHeaderDivs可以解决问题...也许您不能仅对类使用伪选择器？虽然它是有效的，但可能是浏览器的错误。

- crimson_penguin

0

如果您将文档类型切换为XHTML过渡或更高版本，则可以正常工作。虽然我没有尝试过，但它也可能适用于HTML strict。总的来说，除非您通过js事件处理程序指定操作，否则通常要使用a标签进行悬停。

- prodigitalson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- edl · Accepted Answer

你可以尝试以下方法：

#headerDiv div:hover{padding:4px;}

编辑：

如果您想要父级div扩展，请将.header_innerHeaderDivs的显示设置为inline-block。另外，如上所述，您可能需要将DTD声明设置为：或html4.01过渡变体。