Question

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

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.

Other :hover elements on the same page are working.

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

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

Answer 1

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.)

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.