CODEWITHSUNDEEP
htmlcsshover
little tiny man
little tiny man

Reputation: 819

CSS hover effect not triggering on text

Here's a jsfiddle of the project I'm working on http://jsfiddle.net/bhbLa/

I have a picture that is set to grayscale using some CSS, with some text positioned over the image. When the image is hovered over, it turns the grayscale off and hides the text. It's almost exactly what I want.

The problem I'm having is that if you scroll over the very center of the image where the opacity:0; text is, it isn't considered as hovering over the image, which turns the image back to grayscale.

I've racked my brain all day for this, and I don't know why

div.text:hover #cell { opacity:1; }

doesn't correct this problem.

Upvotes: 2

Views: 2024

Answers (1)

Josh Powell
Josh Powell

Reputation: 6297

If I am understanding correctly, you need to target the hover effect on the image's parent and not the image itself.

What your old selector was doing was only targeting the hover effect if the cursor is over the image. Well when you are hovering over the text, which is a block level element, you are actually no longer hovering over the img element and therefor will lose it's hover effect.

Here is the css I changed:

div.cell:hover img {
    filter: none;
    -webkit-filter: grayscale(0);
    transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    -webkit-transition: opacity .2s ease-in-out;
    opacity:1.0;
}

Finally, a fiddle: Demo

Upvotes: 3

Related Questions