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.
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.
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.
Float right and position absolute doesn't work together.
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.
Unable to reproduce but had a similar issue and setting z-index has helped me.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With