在幻灯片中使用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

回答

相关问题