php - 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。

有两种解决方法:您可以将“project-thumb”div 设置为透明背景(使用 css3 或透明图像)或为其设置边框。我能够在您的 IE 页面中对此进行测试，现在它工作正常。看here有关能够在 IE 中将鼠标悬停在空 div 上的更多信息。