css：悬停伪类不工作

我有一个CSS :hover伪类没有产生任何结果。css：悬停伪类不工作

我正在搞一些图片库代码，我设法得到这个不起作用的代码片段。我无法弄清楚为什么。一些关于大小的怪异CSS规则是因为这些div通常包含图像。为简单起见，我删除了图像，但将规则留在其中。

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

我不知道还有什么要说的问题，因为这是如此基础。我可能错过了一些非常明显的东西。这里

的jsfiddle - http://jsfiddle.net/GbxCM/

来源

2012-09-11 iabw

我猜你正在试图做一个画廊，并悬停使用CSS，使包含图像的div进入全屏。我会使用现有的JavaScript库来做到这一点... – mb21

我试图想办法用CSS来做到这一点。 – iabw

如果您希望有下一个和上一个按钮，那么最终您将最终使用JavaScript。而且，如果现有的解决方案已经在所有主流浏览器上测试过，为什么要重新发明轮子。一个很多人使用的是http://lokeshdhakar.com/projects/lightbox2/ – mb21

在某些情况下（主要是与absolute定位），你不能应用:hover这样伪类用display: inline-block;进行计算。（如果你有浏览器，使用检查元素，并添加:hover自己特质 - 通知，这将很好地工作，浏览器只是不登记:hover本身！）

所以，我继续和更换这跟float: left; ，添加了余量（模拟inline-block的样子），并将br更改为clear。结果在this jsFiddle。

来源

2012-09-11 00:43:26 Eric

我原先制作了内嵌块，以便它们自动调整到包含的图像的大小，但那是我为其中一种画廊风格而设计的，其中 - 您是正确的 - 没有完全定位。我认为浮球会在这里发挥作用，我自己也没有想过它，我感到有点傻。我确认并测试后，我会接受。 – iabw

埃里克，你碰巧知道这种差异的原因：悬停，绝对和内联块？这是一个标准，为什么？我找不到关于这个“bug”的任何信息。 – iabw

我也找不到任何官方报告。我假设我只是在寻找错误的东西。我认为，或许“相对”定位可能吸收任何“绝对”定位事件？纯粹是一种猜测。 – Eric

如果我猜你正在试图做正确的东西，那么你并不需要更改定位或任何。我看到你想要做的唯一变化就是改变背景颜色。 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; 
}

来源

2012-09-11 00:38:54 cereallarceny

你的代码似乎工作;然而，你链接的小提琴不起作用。你在他的原始链接。 –

哎呀！更正，谢谢乔希。 – cereallarceny

css：悬停伪类不工作

回答

相关问题