css - css：悬停伪类不起作用

Question

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

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

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

我不确定对这个问题还能说些什么，因为这是非常基本的。我可能错过了一些非常明显的东西。

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

Answer 1

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

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

Answer 2

如果我猜对了您要执行的操作，则无需更改定位或任何其他操作。我能看到你想要做的唯一改变是改变背景颜色。 这是我为澄清该响应而制作的小提琴。

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

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;
}​

Answer 3

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

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