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工作

回答

相關問題