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上的更多信息。

jquery rollovers无法在IE中运行

1 个答案: