3

I have a div position:absolute over a canvas tag. The div uses the hover pseudo class to set overflow:visible to create a simple popup-type effect. In Chrome, this works fine. In IE10, the hover pseudo class is only activated when I'm hovering over an element within the div or if I give the div a background-color.

Any help is appreciated!

1
  • 2
    show the full css class and html element you use.
    – Dejan.S
    Jun 5, 2013 at 19:14

3 Answers 3

4

looks like this can be fixed by using a transparent png as a background image.

EDIT: sorry, shouldve expanded on this more. in ie, if you use the pseudo class of :hover on an element that has a transparent background color, the hover is only triggered when the mouse is over a solid/nontransparent spot. this is usually not an issue unless you are doing something like this:

<style>
#content {
  height:20px;
  overflow:hidden;
  position:absolute;
  width:100px;
}
#content:hover {
  height:100px;
  overflow:visible;
}
#hoverContent {
  position:absolute;
  top:20px;
}
</style>
<div id="content">
    <div style="float:left;">wtf</div>
    <div style="float:right;">hrm</div>
    <div id="hoverContent">lol</div>
</div>

in ie, if you hover over #content, only when the mouse is over 'wtf' or 'hrm' will the overflow content be visible. if you hover BETWEEN the words 'wtf' and 'hrm', youd expect that the hover styles would be applied too because that is part of #content but youd be wrong.

to fix this you can either apply a background color or image to #content.

1
  • Can you expand on your answer a little bit? It's good to know that you've solved your problem, but as this should be helpful for the next user with your problem it would be helpful to add additional details to make it easier to understand/implement.
    – Joe
    Jun 5, 2013 at 19:42
1

A better solution is to use a transparent background color rather than an image:

background:rgba(0,0,0,0);

IE10 treats rgba() as a solid color.

3
  • 1
    How exactly is this a better solution than a transparent PNG? Older browsers that don't support rgba() (like IE8 and earlier) will display this as opaque. A transparent PNG should work in all cases.
    – Ennui
    Feb 12, 2014 at 16:24
  • 1
    Because not all websites need to support IE8 and a transparent png uses more server resources when you send an extra request to fetch it. Feb 20, 2014 at 23:23
  • I doubt many people developing for desktop browsers will find themselves in a situation where the performance increase gained by eliminating a single <1kb GET request is more important than breaking the site for more than 10% of the browser market share. I dream of the day when I have to stop worrying about graceful degradation.
    – Ennui
    Feb 21, 2014 at 14:06
1

Also one possibility is use of inline svg as the background img. You need only svg element with background 1x1 - no color.

  • Pros - No need of additional request
  • Cons - IE8 does not support svg

    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg+xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22+width%3D%221%22+height%3D%221%22+viewBox%3D%220+0+1+1%22%3E%3Ctitle%3Etransparent+bcg%3C%2Ftitle%3E%3C%2Fsvg%3E");
    background-repeat: repeat;
    

Sample is already encoded svg to work in all browsers

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.