11

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/

Spudley
  • 166,037
  • 39
  • 233
  • 307
iabw
  • 1,108
  • 1
  • 9
  • 24
  • I'm guessing you're trying to do a gallery, and on hover use CSS to make the div containing an image go into fullscreen. I'd use an existing JavaScript gallery to do that... – mb21 Sep 11 '12 at 01:20
  • I was trying to get a way to do it with just CSS. – iabw Sep 11 '12 at 01:46
  • if you'd like to have a next and previous button as well you'll end up using JavaScript anyhow. And why reinvent the wheel if there are existing solutions that have been tested on all major browsers. One that a lot of people use is http://lokeshdhakar.com/projects/lightbox2/ – mb21 Sep 11 '12 at 03:31
  • I appreciate that there are various visualization libraries and Javascript will almost definitely come into play for a 'functional' version. My question was directed at strange CSS behavior in what seemed like functional code. – iabw Sep 11 '12 at 14:53

4 Answers4

15

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Cat
  • 66,919
  • 24
  • 133
  • 141
  • I had originally made them inline-blocks so that they'd automatically resize to the contained images, but that was for one of the other gallery styles I was messing with, which - you are correct - were not absolutely positioned. I think the float will work here, and I feel a little silly for not thinking of it myself. I'll accept after I've confirmed and tested. – iabw Sep 11 '12 at 01:41
  • Eric, do you happen to know the reason for this discrepancy with :hover, absolute and inline-block? Is this a standard and why? I can't find any info about this "bug". – iabw Sep 11 '12 at 14:57
  • I can't find any official reports, either. I assume I'm just searching for the wrong thing. I think perhaps the `relative` positioning may absorb any events for `absolute` positioning? Purely a guess. – Cat Sep 11 '12 at 17:00
  • 8
    `:hover` is supposed to work on anything that is visible and has some sort of width and height, and doesn't have anything obstructing it. This includes inline blocks. The behavior here is a bug. – BoltClock Sep 28 '12 at 22:34
  • 4
    BoltClock, you saved my time with a single line `:hover is supposed to work on anything that is visible and has some sort of width and height` Thank you!!!! – Libin Oct 16 '13 at 05:34
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;
}​
cereallarceny
  • 4,913
  • 4
  • 39
  • 74
  • Your code does seem to work; however, the fiddle you linked in does not work. You linked in his original. – Josh Mein Sep 11 '12 at 00:41
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. enter image description here

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.

himanshu goyal
  • 363
  • 2
  • 9
0

I fixed it with removing a z-index: -1 from a wrapper element

Tasos K.
  • 7,979
  • 7
  • 39
  • 63
Abde Nassar
  • 1