jQuery的翻车不是在IE工作

真的努力理解这个问题，任何想法，欢迎jQuery的翻车不是在IE工作

我有图像的旋转木马，并都出现在每一个浏览器翻车，但IE，（在莫在IE8测试）

直播现场 http://www.warface.co.uk/clients/warface.co.uk/testv2 点击顶部的红色框来显示

要增加对conf出现翻转延髓当图像呈现ISNT

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

来源

2011-08-14 Rob

您的问题不包括任何JavaScript代码，并且您链接到的网站包含太多方法来查找答案。减少的测试用例会有所帮助。 –

您帖子的标题暗示您正在使用jquery。但是，你没有向我们展示任何你的JavaScript。那么我们怎么可能找出问题呢？ – maxedison

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

有两种解决方法：您可以将“project-thumb”div设置为透明背景（使用css3或透明图像）或将其设置为边框。我能够在IE中的页面中测试它，现在它工作得很好。看看here有关能够悬停在IE中空格的更多信息。

来源

2011-08-15 00:00:45

Thats @paulGraffix，设置透明图像为我工作。 \t背景：透明网址（images/x.gif）重复0 0; – Rob

jQuery的翻车不是在IE工作

回答

相关问题