jquery翻转在IE中不起作用答案

【问题标题】：jquery rollovers not working in IEjquery翻转在IE中不起作用
【发布时间】：2011-08-14 20:46:08
【问题描述】：

真的很难理解这个问题，欢迎任何想法

我有一个图像轮播，并且所有的图像都出现在除 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;
    }

** -- 编辑 -- **

$('.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
        });

【问题讨论】：

您的问题不包含任何 JavaScript 代码，并且您链接到的站点包含太多内容，无法通过浏览来寻找答案。减少测试用例会有所帮助。
您帖子的标题表明您正在使用 jquery。然而，您还没有向我们展示您的任何 javascript。那么我们怎么可能解决这个问题呢？

标签： php jquery css internet-explorer

【解决方案1】：

问题在于，在 IE 中，您不能将鼠标悬停在空 div 上并触发 mouseover 事件。您会在开发人员工具中注意到，如果您选择 div 元素，它只会选择图像并完全绕过覆盖的 div。

有两种方法可以解决这个问题：您可以将“project-thumb”div 设置为具有透明背景（使用 css3 或透明图像）或给它一个边框。我能够在您的 IE 页面中对此进行测试，现在它工作得很好。查看here 了解更多关于能够将鼠标悬停在 IE 中的空 div 上的信息。

【讨论】：

那是@paulGraffix，设置透明图像对我有用。背景：透明 url(images/x.gif) 重复 0 0;