css：hover伪类无法正常工作

Question

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

我正在搞乱一些图片库代码，我设法让这个代码片段无法正常工作。我无法弄清楚原因。关于大小的一些奇怪的CSS规则是因为这些div通常包含图像。为简单起见，我删除了图像，但将规则留在了。

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

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

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

Answer 1

在某些情况下（主要使用absolute定位），您无法将:hover伪类应用于具有display: inline-block;的内容。 （如果你有Chrome，请使用inspect元素并自己添加:hover特征 - 请注意，它会完美运行！浏览器只是没有注册:hover本身。）

所以，我继续用float: left;替换它，添加了一个边距（模拟inline-block外观），并将br更改为clear。结果在this jsFiddle。

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

Answer 3

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

此外，要检查您的:hover事件是否设置了所需的CSS属性，您可以从chrome强制触发悬停事件（通过检查图像中标记为styles> :hov> hover的红色标记），然后检查：hover CSS属性是否起作用。对我来说，它运行良好，因此我确定该事件不会触发。