Question

I have the following code which works fine in all browsers other than IE.

<div class="hovertest">
    <img src="myimage.jpg" width="200" height="100" alt="myimage" />
    <a href="link.html">&nbsp;</a>
</div>
<br /><br />
<div class="test">test2</div>

jquery:

$("a").hover( function () {
    $(".test").fadeOut();
}); 

css:

div {
    width:200px;
    height:100px;
    background-color:#B22;
    position:relative;
}

a {
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
    text-decoration:none;
}

The a tag is not spanning 100% width and height of the div. The odd thing is though, by removing the image from the div and only having the a tag in there, it works fine in all browsers including IE.

Does anyone know what might be happening to the a tag when there’s an image in the div?

Answer 1

Just use

$("a, img").hover( function () {
    $(".test").fadeOut();
}); 

DEMO:
http://jsfiddle.net/a4GAW/3/

Update:

If you click the img, you can use this workaround

$("img").click(function(){
    document.location = $(this).next("a").attr("href");
}); 

DEMO: http://jsfiddle.net/a4GAW/5/