:Hover Is Not Working Properly in IE9

IE9 CSS hover doesn't work properly

The first <a> tag inside .programItem is not closed in your code:

<div class="programItem">
    <a href="<%#Container.DataItem.Link.HeyperJustLink() %>">

Also you are targeting .navSubMenu .mainMenuContent .programItem:hover a.hoverGreen however there is no parent of .navSubMenu in your HTML

JQuery .is(':hover') not working correctly in IE9

Try doing something like this instead:

var $thePreview = $("#thePreview");

$(".listInfo").hover(
    function () {
        $thePreview.show();
    },
    function () {
        $thePreview.hide();
    }
);

Working example on jsFiddle.

You can still use that code, you just need to change the pseudo-event from hover to mouseenter mouseleave (if you're running 1.9+). See this for more info: jquery.com/upgrade-guide/1.9/#hover-pseudo-event

SVG hover not working in IE9 or Chrome

In SVG tooltips are implemented as child title elements and not as title attributes as they are in html. So you need to create something that looks like this...

<path d="whatever">
    <title>Yellow 999</title>
</path>

What you're seeing is a bug in Firefox that I fixed recently. Firefox 46 onwards will work the same as Chrome and IE and not show a title attribute as a tooltip.

Hover doesn't work on nested ul in ie9

IE9 is seeing the <ul/> padding-left or <li/> margin-left as empty content and so the mouse hover goes straight through it.
I'm not sure why it is doing this but an easy fix would be to add a repeating transparent background image or, if legacy support is not needed, add background-color: (255, 255, 255, 0.01)

Internet Explorer hover behavior not working

I have been unable to find anything further about this problem other than others have experienced the same thing. Hover not working in Internet Explorer

As Woody suggested, this problem can be overcome by adding some background color, but of course, even with minimal opacity, this is not the UI we want as the navigation must be transparent.

One fix I did stumble across was to set the opacity property of the .photo-nav-icon rather than the display property:

.photo-nav-icon { background-image: url(/Images/nav.png); height: 60px; width: 60px; opacity:0; }
.photo-nav:hover > .photo-nav-icon { opacity:1; }

This only works for the icon itself and still doesn't respond to a hover over the entire .photo-nav div, and I don't like using opacity that much as every browser has its own way of handling it.

So, as is stated in the other SO post, I simply added a transparent gif image as the background of the .photo-nav div and that solved the problem:

.photo-nav { position: absolute; height: 400px; width: 72px; background:url(/Images/empty.gif); }

I am not thrilled with this solution, but it does work.

Troubles with IE9 Hover

I believe removing the "height: 80px" from #nav a:hover will get the browser to show what you want.

You are setting height value to an inline element and apparently IE supports that while other browsers do not.

input radio button hover issues in IE 9

What you are describing is the behavior of the label tag. Label tags act like a hover and click target for the input with the id specified in the label's for attribute.

Either you have inadvertently applied a large label to one specific radio button, or maybe one of them is incorrectly closed, causing it to wrap the whole div.

Have you checked all of your label tags to make sure none are incorrectly closed?

---

Now that you've got your problem solved, I thought I'd add a note about self-closing tags in HTML 5 here.

XHTML started to tempt the world with XML strictness. Now that we are in an HTML 5 world, it's easy to believe that's still true. However, HTML 5 doesn't know what /> is. Instead, it tries to automatically close some tags for you.

So in your case, it sounds like most browsers placed the implicit </label> at the expected place, but one browser placed it way out of context. Either way, it's likely that none of them even cared about the />.

Remember our old friend the <p style="color:red;"><div>Why am I not red?</div></p>? HTML places the </p> before the <div> because block elements are not allowed inside <p> tags.

The best thing to do is just get out of the habit of using /> anywhere except elements that always have no content (link, br, img, etc. — and even then, you probably only want to do that for code readability, since in parsing, it makes absolutely no difference).

More info here: http://tiffanybbrown.com/2011/03/23/html5-does-not-allow-self-closing-tags/

::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.

---

Related Topics