Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS hover will not work on position absolute?

Tags:

css

This has never been an issue to me before, and I really don't know what's happening..

Simple - I have this css id with a picture inside. This id has to have position: absolute for it to look correct..

But when I use position: absolute, my hover does nothing.. like i wasn't there.. When I remove the position: absolute, the hover works.

#pil-left {
width: 50px;
height: 50px;
position: absolute;
background-image: url(grafik/pil-left.png);
margin-left: 150px;
margin-top: 320px;
}

#pil-left:hover {
opacity: 0.6;   
}

That simple, but really can't get it to work.

like image 774
Zjitzu Avatar asked Feb 12 '14 16:02

Zjitzu


People also ask

Why hover property is not working in CSS?

Also, hover will not work if you use the wrong CSS format. Note that if you do not get the specificity right, the hover style will not work. Although you can use the ! important rule, there is no guarantee it will always work.

Why does position absolute not working?

If you are placing an element with absolute position, you need the base element to have a position value other than the default value. In your case if you change the position value of the parent div to 'relative' you can fix the issue.

Does float work with position absolute?

Float right and position absolute doesn't work together.

Is it bad to use absolute positioning CSS?

As long as you structure your HTML so that the elements follow a logical order that makes sense when rendered without CSS, there is no reason why using absolute positioning should be considered bad practice.


1 Answers

Unable to reproduce but had a similar issue and setting z-index has helped me.

like image 134
Dimt Avatar answered Oct 21 '22 07:10

Dimt