::After on :Hover Does Not Work in Ie

::after on :hover does not work in IE

This seems to be a bug in IE10 (even when it emulates other versions).

I have, though, found a workaround. If you add an empty CSS rule for #d2:hover, it will then listen to #d2:hover::after as shown in this JSFiddle.

IE:11 hover on before not working

What you can do is put the main content of the <a> in a span, and underline only the span.

a {

  text-decoration:none;

}

a:before {

 content: '➠ ';

}

a:hover span {                 /* changed */

 text-decoration:underline;

}

a:hover:before {

 text-decoration:none;

}

<a href="#"><span>Click here</span></a>

::after on :hover does not work in IE

This seems to be a bug in IE10 (even when it emulates other versions).

I have, though, found a workaround. If you add an empty CSS rule for #d2:hover, it will then listen to #d2:hover::after as shown in this JSFiddle.

CSS issue: a:hover not working with IE (css Ninja needed)

First thing I'd do is double check that the order of the psuedo selectors is correct.

It should be-

a:link {color:#FF0000} /* unvisited link */  
a:visited {color:#00FF00} /* visited link */  
a:hover {color:#FF00FF} /* mouse over link */  
a:active {color:#0000FF} /* selected link */  

The only specific IE hover issue I remember relates to non-link elements so I don't think that is your issue. http://www.bernzilla.com/item.php?id=762 - Just in case.

If that doesn't answer your question do you mind posting the related block of css?

---

GAH- That was a hard one!

It looks like IE is breaking because the links don't have an associated Href element. Fix that and you should be fine.

--Breaking News - I may be an idiot- That was the last thing I changed on my test page and that fixed it but when I put it all back together it broke everywhere... so take what I just posted with a grain of salt. I'm backing up to see what happened.

Tooltip doesn't work on IE 10

My smart colleague found this -- It's IE 10 bug. The solution is here -- ::after on :hover does not work in IE

But I choose not to add empty #ID:hover block, because it will be ignored by minifier

    /**
     * Fix for IE10 bug. This block could be empty, but the minifier would remove it.
     */
    #id:hover {
      cursor: pointer;
    }

Hover effect does not work in IE

1. Put your markup through the W3C HTML Validator and fix all errors. Internet Explorer especially dislikes invalid HTML markup and you have an unclosed <div> element among other things.

2. Your last <link> tag is missing its closing bracket, >.

   <link rel="stylesheet" type="text/css" href="../Style Library/fonts/font-awesome-4.2.0/css/font-awesome.min.css"
   

3. You have a whitespace character within the href URL of your CSS paths triggering W3C errors, href="../Style Library/css/normalize.css". Try getting rid of that by renaming whatever it takes. Play it safe and avoid whitespace within any URL.

4. You never stated specifically which versions of Explorer.

CSS hover effect does not work after running jquery function

That sounds not weird...Try to set !important on the hover background, like this:

.childDiv:hover {
  background: #2b2b2b !important;
}

Transition on Tooltip hover doesn't work on IE, works well in Google Chrome

I think you no need to use calc for this.

[tooltip] {

 position: relative;

  margin: 100px;

}

/* Arrow */

[tooltip]:before {

 width: 16px;

 height: 6px;

 left: 50%;

 margin-top: 2px;

 top: 10px;

 content: '';

 position: absolute;

 z-index: 10;

 box-sizing: border-box;

 border-left: 8px solid transparent;

 border-right: 8px solid transparent;

 border-bottom: 10px solid #00204e;

 transform: translate(-50%, 0%);

 opacity: 0;

 -webkit-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);

 -moz-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);

 -ms-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);

 -o-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);

 transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);

 pointer-events: none;

}

/* Text */

[tooltip]:after {

 transform: translate(-50%, 0%);

 left: 50%;

 margin-top: 11px;

 top: 10px;

 font-weight: normal;

 text-shadow: none;

 background: #00204e;

 border-radius: 4px;

 color: #fff;

 content: attr(tooltip);

 padding: 10px;

 position: absolute;

 white-space: normal;

 width: 150px;

 width: max-content;

 font-size: 10px;

 font-family: 'Helvetica Neue';

 line-height: normal;

 max-width: 150px;

 text-align: left;

 height: auto;

 display: inline-block;

 opacity: 0;

 -webkit-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);

 -moz-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);

 -ms-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);

 -o-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);

 transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);

 pointer-events: none;

 z-index: 10;

}

[tooltip]:hover {

}

[tooltip]:hover::before,

[tooltip]:hover::after {

 opacity: 1;

 pointer-events: auto;

 top: 20px;

 overflow: visible;

    z-index: 10;

}

<span tooltip="I am a tooltip.">Tooltip</span>

---

Related Topics