Hover/mouseover not firing in IE, image in the way

I have a div and within that div is an image, and layed on top of those is 2 divs which have jquery hover attached to them (same issue with onmouseover though, so not jquery).

Problem is when the image is loaded, even though the divs are layed on top of the image they won't fire because the image is always on top (even though it isn't actually, and i've tried putting it lower down on z-index but it didn't help).

jquery:

<script type="text/javascript">
$(document).ready(function () {
    $(this).find("#largeInset").find(".content").css("width","0");

    $("#largeInset").hover (function() { 
        $(this).find(".content").animate({width: '100%'}, 500, function() {});
    },
    function() { 
        $(this).find(".content").animate({width: '0'}, 500, function() {});
    });


    $(this).find("#largeArticles").find(".content").css("width","0");

    $("#largeArticles").hover (function() { 
        $(this).find(".content").animate({width: '40%'}, 500, function() {});
    },
    function() { 
        $(this).find(".content").animate({width: '0'}, 500, function() {});
    });

});
</script>

Html:

<div class="larg开发者_运维技巧eContent">
    <img src="<?php  echo $img[0]; ?>" border="0" alt="" title="" />
        <div id="largeInset">
            <div class="content">
            [content]
            </div>
        </div>
        <div id="largeArticles">
            <div class="content">

            <ul> (loop fills this)
                <li>
                [content]
                </li>
            </ul>
            </div>
            <br style="clear: both;" />
        </div>
    </div>

Is this a known IE bug that I just haven't come accross before? Or is there a bug in my code? When filled with content the largeInset and largeArticles divs should fire on hover and slide out across the image, works in chrome but not IE as IE seems to select the image on top of the divs even though they are actually below it (Would work fine if the image didn't load).

Any ideas? Hopefully I made sense.

CSS:

    .articles { position: relative; width: 100%; padding: 0; float: left; background-color: #fff; }
.large { margin: 0 0 10px; border: 0px solid #000; min-height: 200px; }
.large img { max-width: 100%; min-width: 100%; min-height: 350px; z-index: -1; }

.largeContent { z-index: 99; position: absolute; top: 0; width: 100%; height: 100%; }
.filler { width: 100%; height: 100%; }
#largeInset { position: absolute; top: 0; right: 0; min-height: 100%; width: 25%; color: #fff; }
#largeInset .head { padding: 10px 0; }
#largeInset p { font-size: 0.9em; margin: 5px 10px; }
#largeInset .content { overflow: hidden; position: absolute; top:0; background-color: #000; right: 0; color: #fff; }

#largeArticles { position: absolute; top: 0; left: 0; width: 25%; min-height: 100%; }
#largeArticles .content { overflow: hidden; position: absolute; top: 0; left: 0; width: 40%; background-color: #000; }

I've solved this for now by adding content to the divs. IE will only fire when you mouseover the content in the div (maybe because position is absolute?). I added a transparent 1px image to the divs, but stretched to 100% x 100%, so you hover over the image and it will fire.

This seems a bit hacked together though

See http://iamnotahippy.com/ice/web/?cat=5 (hover over sides of image)