在幻燈片中使用onclick覆蓋div - > onclick does not change

我在標題中的含義是，無論哪個容器位於淡入淡出式動畫的頂部（可見），「onclick」中的href始終是相同。在幻燈片中使用onclick覆蓋div - > onclick does not change

下面是HTML

<div id="teaserslider"> 
       <ul> 
        <li> 
         <section id="container_1"> 
          <div class="head gradient-top loading" onclick="document.location.href='container1_detail.html'"> 
           <div> 
            <!-- Content --> 
           </div> 
          </div> 

         </section> 
        </li> 
        <li class="animation"> 
         <section id="container_2"> 
          <div class="head gradient-top loading" onclick="document.location.href='container2_detail.html'"> 
           <div> 
            <!-- Content --> 
           </div> 
          </div> 

         </section> 
        </li> 
       </ul> 
      </div>

這裏是CSS

#teaserslider{ 
    height: 100px; 
    margin-bottom: 6px; 
} 

#teaserslider li { 

    position: absolute; 

    list-style: none; 
    -webkit-transition: opacity 1s ease-in-out; 
} 

@-webkit-keyframes fadeout{ 

0% { 
    opacity:1; 
} 
45% { 
    opacity:1; 
} 
55% { 
    opacity:0; 
} 
100% { 
    opacity:0; 
} 
} 

#teaserslider li.animation { 
    -webkit-animation-name: fadeout; 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-duration: 5s; 
    -webkit-animation-direction: alternate; 
    -webkit-transform: translateZ(0);//hardware acceleration 

}

你可能已經注意到，因爲這段代碼iOS版的PhoneGap應用程序內部運行我只用WebKit引擎。無論目前顯示哪個容器，當我點擊容器時，我總是會看到「container2_detail.html」。任何人都知道如何解決此問題？謝謝。

來源

2012-07-17 dan

你能提供一個演示網址？ – 2012-07-17 10:35:44

經過快速測試 - 這似乎是因爲html標記順序意味着container_2始終會位於container_1的頂部*，即使它已淡出......此外，此答案可能有所幫助：http：// stackoverflow .com/questions/3331353/css-3-transitions-on-the-display-property – 2012-07-17 10:46:02

恩，不好意思。我嘗試了jsFiddle，但它沒有顯示出結果 – dan 2012-07-17 10:49:27

我嘗試這樣做，它似乎工作

@-webkit-keyframes fadeout{ 

0% { 
    opacity:1; 
    z-index: 1; 
    display: block; 
} 
45% { 
    z-index: 1; 
    display: block; 
    opacity:1; 
} 
55% { 
    z-index: -1; 
    display: none; 
    opacity:0; 
} 
100% { 
    z-index: -1; 
    display: none; 
    opacity:0; 
}

}

來源

2012-07-17 12:47:10 dan

可能你必須定義z-index它。像這樣寫：

@-webkit-keyframes fadeout{ 

0% { 
    opacity:1; 
    z-index:1; 
} 
45% { 
    opacity:1; 
    z-index:1; 
} 
55% { 
    opacity:0; 
    z-index:-1; 
} 
100% { 
    opacity:0; 
    z-index:-1; 
} 
}

來源

2012-07-17 10:37:18 sandeep

嗯沒有沒有做到這一點。 – dan 2012-07-17 10:43:07

你可以在http://jsfiddle.net創建一個例子 – sandeep 2012-07-17 10:45:19

http://jsfiddle.net/k9wAV/4/它的工作原理，我很愚蠢，因爲我沒有輸入任何文字作爲內容 – dan 2012-07-17 10:53:03

在幻燈片中使用onclick覆蓋div - > onclick does not change

回答

相關問題