css:hover伪类不起作用 [英] css :hover pseudo-class not working

问题描述

我有一个CSS :hover 伪类，它不会产生任何结果.

I've got a CSS :hover pseudo-class that is not producing any results.

我在弄乱一些图片库代码，并且设法得到了无效的代码段.我不知道为什么.一些关于大小的怪异CSS规则是因为这些div通常包含图像.为了简单起见，我删除了图像，但保留了规则.

I was messing around with some image gallery code, and I've managed to get this snippet that doesn't work. I can't figure out why. Some of the weirder CSS rules regarding size here are because these divs normally contain images. I removed the images for simplicity, but left the rules in.

其他:hover 元素正在工作.

我不确定该问题还有什么要说的，因为这很基础.我可能错过了一些非常明显的东西.

I'm not sure what else to say about the problem, since this is so basic. I'm probably missing something really obvious.

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

JSFiddle here - http://jsfiddle.net/GbxCM/

推荐答案

在某些情况下(主要是使用绝对定位)，您不能应用:hover 伪类显示为 display:inline-block; 的内容.(如果您使用的是Chrome，请使用inspect元素并自己添加:hover 特性-注意，它将完美运行！浏览器本身并未注册:hover )

In some cases (mostly with absolute positioning), you cannot apply a :hover pseudo-class to something with display: inline-block;. (If you have Chrome, use inspect element and add the :hover trait yourself--notice, it will work perfectly! The browser just doesn't register the :hover itself.)

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

So, I went ahead and replaced this with float: left;, added a margin (to simulate the inline-block look), and changed the br to a clear. The result is in this jsFiddle.

这篇关于css:hover伪类不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！