CSS :hover function not working

Question

I am trying to add an image to a webpage which I have used CSS to do. The problem is that I've created a hover function which shows the right side of the image. This does works but when I add position: relative or the z-index: -1, the hover function just doesn't work. Is there any way around this problem without taking out position or z-

Thanks

http://jsfiddle.net/L5rvkt2g/

#logo {
        background: url(http://upload.wikimedia.org/wikipedia/commons/b/b9/1875_CC_double_eagle.jpg);
        width: 956px;
        height: 884px;
        background-position: left;
        margin: auto;
        position: relative;
        z-index: -1;
    }

        #logo:hover {
            background-position: right;
        }

Do you have to use -1? Can you not keep it at normal index and then shift whatever needs to be up? — Luke
– Luke, Commented Sep 24, 2014 at 15:20

Thomas Ayoub · Accepted Answer · 2014-09-24 16:47:39Z

1

The issue is about the z-index: -1; as the mouse can't hover index lower than 0, the hover doesn't work. Remove it and it'll work well !

edited Sep 24, 2014 at 16:47

answered Sep 24, 2014 at 15:19

Thomas Ayoub

29.6k16 gold badges98 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Adam Jenkins Over a year ago

Poorly worded answer. What does the mouse is at index 0 even mean?

Thomas Ayoub Over a year ago

@Adam Is this better ?

Adam Jenkins Over a year ago

@Thomas no. Look at this example of a mouse hovering an element that has a z-index lower than 0: jsfiddle.net/ycrw02sd.

Adam Jenkins Over a year ago

@canon - Trust me, I know exactly what I did, but my point was to negate the answerer's edit: the mouse can't hover index lower than 0

Thomas Ayoub Over a year ago

@Adam if you want to improve the answer, feel free to do it, as english is not my native language and I just know a few things in CSS, I didn't find the wise word to say and that's why I don't edit my answer (in order to not say another thing wrong) ;)

Bhojendra Rauniyar · Accepted Answer · 2014-09-24 15:19:17Z

0

Lower layer cannot be hovered since it is covered by upper layer.

Just suppose in a bus, there are two window where you're sitting and you want to shake your hand outside the window. One window has glass and another has no glass, then you cannot shake your hand without opening the glass. That means the upper layer is blocking to get hovered.

Just bring your element upper-ward.

answered Sep 24, 2014 at 15:19

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Comments

Benjamin · Accepted Answer · 2014-09-24 15:24:11Z

0

You are supposed to remove the z-index from your #logo and then your code works like a charm. Here is the working fiddle. This is to make sure that index of your img is 0 you can actually hover on your #logo.

answered Sep 24, 2014 at 15:24

Benjamin

2,6902 gold badges24 silver badges34 bronze badges

Collectives™ on Stack Overflow

CSS :hover function not working

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related