CSS中:hover伪类不起作用

Question

我有一个 CSS 的 :hover 伪类，但其没有产生任何效果。

我在调整图片库代码时，得到了这个无法工作的片段。我无法弄清为什么。这里关于大小的一些奇怪的 CSS 规则是因为这些 div 通常包含图片。出于简单起见，我删除了图像，但保留了规则。

同一页中的其他 :hover 元素是可以工作的。

因为这太基础了，所以我不知道还要说什么问题。我可能忽略了某些非常明显的东西。

JSFiddle 在此处 - http://jsfiddle.net/GbxCM/

- iabw

---

我猜你想做一个画廊，在悬停时使用CSS让包含图像的div全屏。我建议使用现有的JavaScript画廊来实现这个功能... - mb21

我试图找到一种只使用CSS的方法来实现它。 - iabw

如果你想要添加上一页和下一页按钮，那么你最终还是需要使用JavaScript。而且，如果已经有现成的解决方案在所有主流浏览器上都经过了测试，为什么要重新发明轮子呢？其中一个被很多人使用的解决方案是http://lokeshdhakar.com/projects/lightbox2/。 - mb21

我很感激有各种可视化库，而且Javascript几乎肯定会用于“功能”版本。我的问题是针对在看似功能代码中出现的奇怪CSS行为。 - iabw

Answer 1

在一些情况下（主要是使用绝对定位），你无法将 :hover 伪类应用于具有 display: inline-block; 属性的元素。（如果你使用 Chrome 浏览器，可以使用检查元素功能并自行添加 :hover 特性——注意，它将完美地工作！浏览器只是不能识别 :hover 本身。）

因此，我将其替换为 float: left;，添加了一个 margin（以模拟 inline-block 的外观），并将 br 更改为 clear。结果在这个jsFiddle 中呈现。

- Cat

---

我最初将它们设置为inline-block，以便它们可以自动调整大小以适应所包含的图像，但那是我在尝试另一种画廊样式时使用的方式，而且 - 你是正确的 - 那些样式并没有被绝对定位。我认为这里用浮动会起作用，我感到有点傻没有自己想到它。在确认和测试之后，我会接受它。 - iabw

Eric，你知道:hover、absolute和inline-block之间存在差异的原因吗？这是一个标准吗？我找不到任何关于这个“bug”的信息。 - iabw

我也找不到任何官方报告。我猜我可能只是在搜索错误的东西。我认为，可能是 relative 定位吸收了 absolute 定位的任何事件？这只是个猜测。 - Cat

:hover 应该可以作用于任何可见且具有一定宽度和高度，且没有任何阻挡物的元素上，包括内联块。这里的行为是一个 bug。 - BoltClock

BoltClock，你用一句话节省了我的时间：“:hover应该适用于任何可见且具有某种宽度和高度的内容。”谢谢！！！ - Libin

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

- cereallarceny

---

你的代码似乎可以工作；然而，你链接的示例无法工作。你链接了他的原始示例。 - Josh Mein

Answer 3

对我来说，问题出在我的Chrome设置上。我正在测试我的多平台Web应用程序，使用Chrome在移动视图中进行测试，其中悬停事件默认被禁用。 您可以通过单击元素选项卡左上角的移动图标（如图所示）来禁用移动模式。 此外，为了检查您的:hover事件是否设置了所需的CSS属性，您可以从Chrome中强制触发悬停事件（通过在styles> :hov> hover中检查hover并且在图像中用红色标记），然后检查:hover CSS属性是否正常工作。 对于我来说，它很好地工作，所以我确定事件没有触发。

- himanshu goyal

Answer 4

我通过从包装元素中删除 z-index: -1 来解决了这个问题。

- Abde Nassar