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