Question

我试图将一个正常的div格式滑动到一个div中，该div在悬停时使用过渡效果（基本上，容器中有两张图片，两者都在完全相同的位置，如果图片在顶部当鼠标消失时，它会平滑地消失并再次显得平滑。） Demo

<html>
<head>
<style type="text/css">
#scrolldown 
  {background-color:#000000;width:90%;height:10%;}
#blend 
  {position: absolute;top:10%;}
#blend img
  {opacity:0;position: absolute; 
   top: 0; left: 0; opacity: 1;    
   transition: opacity 0.5s;}
#top:hover 
  {opacity:0}
</style>
</head>
<body>

<h1>CLICK</h1>

    <div id="scrolldown"></div>
    <div id="blend">
    <img src="hover.png">
    <img id="top" src="default.png">
    </div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js">
</script>
<script type="text/javascript"">
$(document).ready(function() {
  $("#scrolldown").hide();

  $("h1").click(function() {
    $("#scrolldown").slideToggle(1000);
  });
});
</script>
</body>
</html>

但是，我想实现，切换容器（黑色）显示在过渡容器（红色）上方。我尝试给黑色容器一个z索引为2，同时给红色容器一个z索引为1，但是仍然没有变化，将这些框放入具有不同z索引的不同层并没有帮助。在尝试了各种数字后，我意识到，使用-1作为红色框的z-index实际上会使黑框出现在它上面，但过渡效果不再起作用。（Demo）（我怀疑这是因为转换取决于具有不同的层）有人有另一个想法吗？

slide在转换div上方切换div

0 个答案: