hover IE 10/9/8 doesn't work on transparent element

Question

I have:

1. Single Page App
2. CSS mega menu that opens on hover

When the user clicks a link, the menu doesn't go away in IE 10/9/8 when I click on the text of the link. If I click on the spacing around the text it goes away.

Pulling my hair out trying to figure this out... it works fine in Chrome/IE11

here is the code that makes it work for Chrome/IE11:

    var $a = _i.$(jqEvent.target);
    var $menu = $a.closest('.areaNav');
    var $tempBlockOut = _i.$('<div class="tempBlockOut"></div>');
    $tempBlockOut.appendTo($menu.parent());
    var z = $a.closest('.megamenu').css('z-index');
    $tempBlockOut.css({ width: '50px', height: '50px', background: 'transparent', position: 'absolute', 'z-index': z }).position({
        of: jqEvent
    });
    setTimeout(function () {
        $tempBlockOut.remove();
    }, 100);

I'm placing a transparent div where the cursor is so that hover gets reset and the CSS menu disappears when the user selects a link.

Answer 1

the following code fixes this issue for IE10/9/8

    $tempBlockOut.css({ width: '50px', height: '50px', background: '#fff', opacity: 0, position: 'absolute', 'z-index': z }).position({
        of: jqEvent
    });

changed the background to #fff, and set opacity to zero. apparently IE10/9/8 does not register hover on transparent elements.