Question

Really struggling to understand this problem, any ideas are welcome

I have a carousel of images and all have rollovers that appear in every browser but IE, (testing in IE8 at the mo)

Live site
http://www.warface.co.uk/clients/warface.co.uk/testv2
click top red box to reveal

To add to the confusion rollover appears when an image isnt present

HTML

<div class="anyClass">
    <ul><?php query_posts('category_name=project'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <li><div class="project-thumb caption">
                <div class="cover boxcaption">
                    <div class="content">
                    <h2><?php the_title() ?></h2>
                        <a class="view-project" href="<?php the_permalink() ?>">View Project</a>
                        </div><!--content END -->   
                            </div><!-- cover boxcaption END -->
                                </div><!-- project-thumb caption END -->
            <?php $description = get_post_meta($post->ID, "project-thumb", $single = true);
            if($description !== '') { echo $description; } ?></li>

        <?php endwhile; endif;
        wp_reset_query(); ?>
    </ul></div><!-- anyClass END -->

CSS

.project-thumb { /* -- This is the hit area -- */
    overflow: hidden; 
    width:499px;
    height:337px;
    display:block;
    top:0px;
    right:0px;
    position: absolute;
    }
.project-thumb .boxcaption { /* -- This is the sliding area -- */
    background: #f7c923;
    position: absolute; 
    width:499px;
    opacity: .9; /* For IE 5-7 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); /* For IE 8 */
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    }
.caption .boxcaption {
    height:100%;
    left: 100%;
    }
.project-thumb .content {
    width:400px;
    display:block;
    margin:0 auto;
    top:34%;
    position: relative;
    display:block;
    }

** — EDIT — **

JS

$('.project-thumb.caption').hover(function(){
            $(".cover", this).stop().animate({left:'0%'},{queue:false,duration:0}); //Position on rollover
        },function() {
            $(".cover", this).stop().animate({left:'100%'},{queue:false,duration:0}); //Position on rollout
        });

Answer 1

The problem is that in IE you cannot hover over an empty div and have the mouseover event fire. You’ll notice in developer tools that if you select the div element it just selects the image and completely bypasses the overlayed div.

There are two ways around this: you can set the “project-thumb” div to have a transparent background (using css3 or a transparent image) or give it a border. I was able to test this in your page in IE and it works just fine now. Look here for more info on being able to hover over an empty div in IE.