css：悬停伪类不起作用答案

【问题标题】：css :hover pseudo-class not workingcss：悬停伪类不起作用
【发布时间】：2012-09-03 21:12:32
【问题描述】：

我有一个没有产生任何结果的 CSS :hover 伪类。

我在搞乱一些图片库代码，但我设法得到了这个不起作用的 sn-p。我不知道为什么。这里关于大小的一些奇怪的 CSS 规则是因为这些 div 通常包含图像。为简单起见，我删除了图像，但保留了规则。

同一页面上的其他 :hover 元素正在工作。

我不知道该问题还能说什么，因为这是非常基本的问题。我可能遗漏了一些非常明显的东西。

JSFiddle 这里 - http://jsfiddle.net/GbxCM/

【问题讨论】：

我猜你正在尝试做一个画廊，并在悬停时使用 CSS 使包含图像的 div 进入全屏状态。我会使用现有的 JavaScript 库来做到这一点...
我试图找到一种仅使用 CSS 的方法。
如果您还想拥有下一个和上一个按钮，无论如何您最终都会使用 JavaScript。如果现有的解决方案已经在所有主要浏览器上进行了测试，为什么还要重新发明轮子。很多人使用的是lokeshdhakar.com/projects/lightbox2
我很欣赏有各种各样的可视化库，Javascript 几乎肯定会在“功能”版本中发挥作用。我的问题是针对看似功能代码的奇怪 CSS 行为。

标签： css pseudo-element

【解决方案1】：

在某些情况下（主要使用absolute 定位），您不能将:hover 伪类应用于带有display: inline-block; 的东西。（如果您有 Chrome，请使用检查元素并自己添加 :hover 特征——注意，它会完美运行！浏览器本身不会注册 :hover。）

因此，我将其替换为 float: left;，添加了边距（以模拟 inline-block 外观），并将 br 更改为 clear。结果在this jsFiddle。

【讨论】：

我最初将它们设置为内联块，以便它们自动调整大小以适应包含的图像，但那是我正在搞乱的其他画廊风格之一，你是对的 - 是不是绝对定位。我认为浮动在这里会起作用，我自己没有想到它，我觉得有点傻。我确认并测试后接受。
Eric，您是否知道与 :hover、absolute 和 inline-block 存在这种差异的原因？这是一个标准吗？为什么？我找不到有关此“错误”的任何信息。
我也找不到任何官方报告。我想我只是在寻找错误的东西。我认为relative 定位可能会吸收absolute 定位的任何事件？纯属猜测。
:hover 应该适用于任何可见的、具有某种宽度和高度的东西，并且没有任何阻碍它的东西。这包括内联块。这里的行为是一个错误。
BoltClock，你用一行代码节省了我的时间:hover is supposed to work on anything that is visible and has some sort of width and height 谢谢！！！！

【解决方案2】：

如果我猜对了您要执行的操作，那么您无需更改定位或其他任何操作。我能看到你想要做的唯一改变是改变背景颜色。 Here's the fiddle I made to clarify that response.

为了便于阅读，这里是代码：

HTML

<div class="wrapper">
    <div class="squareswrapsolo"></div>
    <div class="squareswrapsolo"></div>
    <div class="squareswrapsolo"></div>
    <div class="squareswrapsolo"></div>
    <br>
    <div class="squareswrapsolo"></div>
    <div class="squareswrapsolo"></div>
    <div class="squareswrapsolo"></div>
    <div class="squareswrapsolo"></div>
</div>

CSS

.wrapper {
    height: 600px;
    width: 600px;
    overflow: hidden;
    position: relative;
}

.squareswrapsolo {
    height: 100px;
    width: 100px;
    display: inline-block;
    overflow: hidden;
    background: #ccc;
}
.squareswrapsolo:hover {
    background: #000;
}

【讨论】：

您的代码似乎确实有效；但是，您链接的小提琴不起作用。您在他的原件中链接。

【解决方案3】：

对我来说，问题出在我的 Chrome 设置上，我在移动视图中使用 chrome 测试我的多平台 Web 应用程序，默认情况下禁用悬停事件。如图所示，您可以通过单击元素选项卡左上角的移动图标禁用移动模式。

此外，要检查您的 :hover 事件是否设置了所需的 css 属性，您可以从 chrome 强制触发悬停事件（通过检查图像中标记为红色的 styles> :hov> hover 悬停）并检查 :hover CSS 属性是否有效。对我来说它工作正常，所以我确定事件没有触发。

【讨论】：