css :hover pseudo-class not working

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.

Answer 2

For me The problem was with my Chrome setting, I was testing my multi-platform web application with chrome in Mobile view for which the hover event is by-default disabled. You can disable the Mobile mode by clicking the mobile icon in the top-left of Elements tabs as shown in image.

Moreover, to check if your :hover event is setting the desired css property or not you can force-trigger the hover event from chrome (by checking hover in styles> :hov> hover red marked in image) and check if the :hover CSS property is working or not. For me it was working fine so I was sure that the event is not triggering.

Answer 3

If I'm guessing correctly what you're trying to do, then you don't need to change the positioning or any of that. The only change I can see you wanting to make is changing the background color. Here's the fiddle I made to clarify that response.

Here's the code for readability's sake:

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