The Click event does not work in IE when the element has an opacity of zero

advertisements

I have an element the opacity of which I set to zero when hovered over, I also have binded a click event to this link which performs an action when clicked but this click does not work in IE, only other browsers. Is there anything I can do to make it still clickable when the opacity is zero in IE?

Thanks!

$("a.hover").mouseenter(function() {

             $(this).animate({opacity:0});

        });

     $("a.hover").click(function(event) {

         event.preventDefault();
         //perform other stuff///
     });


HTML:

<a href="#" class="hover">My Link</a>

CSS:

.hover {
    transition: opacity 0.3s;
}
.hover:hover {
    opacity: 0;
}

JS:

$("a.hover").click(function (event) {
    event.preventDefault();
    //perform other stuff///
});

Works fine for me in Chrome, FF and IE 8 + 9

DEMO: http://fiddle.jshell.net/Pisi2012/BxHB7/