IE8 CSS Hover Image Not Clickable JQuery

Question

Hi Everyone!

I have an image which is has an onmousedown event . When I hover over it, it displays a seperate image. My hover code looks like this:

            $(".baur").hover(
                            function () {
                                    $(".hoverbaur").show();
                            },

I've been using this code for a while, although today I tested in IE8 and the link doesn't work! Initially, I set hoverbaur css display to none and then the JQuery alters this on hover. I know I could link the hover image also, but there's many of them. I was hoping that there was a CSS solution that would make the hovering image visible, yet have the onclick event of the image underneath it still execute.

I suppose my other question would be why does this work in FF and Chrome?

Sure thing! An example image looks like this

<img class="baur" onmousedown="showDiv()">
<img class="hoverbaur" style="display:none">

function showDiv(){
$("#welcome").show
}

Any advice would help, Thanks!

Answer 1

You have show() method mis-typed as show. It should be:

$("#welcome").show();

Note: jQuery allows you to make your code unobtrusive. You should avoid using inline javascript/css.