JQuery ролловеры не работают в IE

Question

Действительно изо всех сил, чтобы понять эту проблему, любые идеи приветствуются

У меня есть карусель изображений, и у всех есть ролловеры, которые появляются в каждом браузере, кроме IE, (тестирование в IE8 в настоящее время)

Живой сайт http://www.warface.co.uk/clients/warface.co.uk/testv2 щелкните верхнюю красную коробку, чтобы показать

Добавление к путанице путаницы появляется, когда изображение отсутствует

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;
    }

** - РЕДАКТИРОВАТЬ - **

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

Проблема в том, что в IE вы не можете навести курсор на пустой div и вызвать событие mouseover.В инструментах разработчика вы заметите, что если вы выбираете элемент div, он просто выбирает изображение и полностью обходит наложенный div.

Есть два способа обойти это: вы можете установить div "project-thumb", чтобы иметь прозрачный фон (используя css3 или прозрачное изображение) или задать ему границу.Я смог проверить это на вашей странице в IE, и теперь он работает отлично.Посмотрите здесь для получения дополнительной информации о возможности навести курсор на пустой элемент div в IE.