display：inline;不适用于复制链接

您能否解释为什么只有第三个“复制链接”仅在所有面板都关闭时才起作用？
我希望我的复制链接可以在面板中打开，并且面板也可以打开。display：inline;不适用于复制链接

这是我的PAGE： http://500milligrammes.com/facticemagazine/final/0/

该处是我的代码：

<!DOCTYPE HTML> 
<!--[if IE 8]><html lang="en" class="lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> 
<html lang="en"> 
<!--<![endif]--> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script> 

    <style> 
     .panel1, 
     .panel2 { 
      display: none; 
      border: 1px solid #ccc; 
      background-color: #eee 
     } 

     .flip1, 
     .flip2 { 
      border: 1px solid #ccc; 
      background-color: #eee 
     } 

     #check, 
     #check2 { 
      visibility: hidden; 
      width: 12px; 
      height: 12px; 
     } 

     span#copy-callbacks, 
     span#copy-callbacks2 { 
      float: none; 
      cursor: pointer; 
     } 
    </style> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("span#copy-callbacks").zclip({ 
       path: "ZeroClipboard.swf", 
       copy: $('#callback-paragraph').text(), 
       beforeCopy: function() { 
        $('#copy-callbacks').css('background', 'none'); 
       }, 
       afterCopy: function() { 
        $('#copy-callbacks').css('background', 'none'); 
       } 
      }); 

      document.getElementById("copy-callbacks").onclick = function() { 
       document.getElementById("check").style.visibility = "visible"; 
      } 
     }); 


     $(document).ready(function() { 
      $('span#copy-callbacks').hover(
       function() { 
        $(this).css({ 
         "color": "#e0ccb4" 
        }); 
       }, 

       function() { 
        $(this).css({ 
         "color": "#000" 
        }); 
       } 
      ); 




      $("span#copy-callbacks2").zclip({ 
       path: "ZeroClipboard.swf", 
       copy: $('#callback-paragraph2').text(), 
       beforeCopy: function() { 
        $('#copy-callbacks2').css('background', 'none'); 
       }, 
       afterCopy: function() { 
        $('#copy-callbacks2').css('background', 'none'); 
       } 
      }); 

      document.getElementById("copy-callbacks2").onclick = function() { 
       document.getElementById("check2").style.visibility = "visible"; 
      } 
     }); 


     $(document).ready(function() { 
      $('span#copy-callbacks2').hover(
       function() { 
        $(this).css({ 
         "color": "#e0ccb4" 
        }); 
       }, 

       function() { 
        $(this).css({ 
         "color": "#000" 
        }); 
       } 
      ); 




      $(".flip1").click(function() { 
       $(".panel1").slideToggle("fast"); 
      }); 

      $(".flip2").click(function() { 
       $(".panel2").slideToggle("fast"); 
      }); 
     }); 
    </script> 
</head> 

<body> 





    <div class="flip1">Click to slide the first panel down or up</div> 
    <div class="panel1"> 

     when this panel is open, any copy link works !!! 

    </div> 





    <div style="margin-top:150px;" class="flip2">Click to slide the second panel down or up</div> 
    <div class="panel2"> 
     when a copy link is inside a panel, it doesn't work !!! 
     <br/> 
     <br/> 

     <span id="copy-callbacks">Copy link&nbsp;&nbsp;<img src="check.png" id="check" style="display: inline;"></span> 
     <span style="font-size:0px;" id="callback-paragraph">essaie sans alert</span> 

    </div> 





    <div style="margin-top:150px; "> 
     This one works perfectly when all panels are closed !! 
     <br/> 
     <span id="copy-callbacks2">Copy link&nbsp;&nbsp;<img src="check.png" id="check2" style="display: inline;"></span> 
     <span style="font-size:0px;" id="callback-paragraph2">essaie sans alert</span> 
    </div> 





    <script type="text/javascript" src="jquery.zclip.js"></script> 
    <script type="text/javascript" src="jquery.cbpFWSlider.min.js"></script> 
</body> 

</html>

来源

2015-09-02 faty fatoumata

ZClip增加其沾在底部和绝对定位的闪光（SWF）对象当您的面板关闭时，zclip对象容器将覆盖第三个链接，而您无法单击它。看到更新后的小提琴，我把边框zclip，你可以看到，它的正上方的链接：http://jsfiddle.net/4x3qctno/2/

当您打开面板时，推动第三链路，但zclip容器停留在同一个地方，所以你的链接工作。

为了解决这个问题，改变zclip对象容器的z-index CSS中像这样：

.zclip{ 
    z-index:-1000!important; 
}

来源

2015-09-02 20:31:07

感谢家伙，你帮了我很多，有效的位置是问题。为了解决这个问题，我在query.zclip.js上工作 - >我通过继承和删除关于top和left px的行来更改位置absolution：D –

是的，你也可以这样做。有几种方法，z-index是最简单的。将来使用代码检查器来突出显示元素并查看所在的位置。覆盖其他元素的定位元素是一个常见问题... –

只是一个问题，如何在面板内复制链接，为什么我们看不到边框：1px纯红色; ？ –

display：inline;不适用于复制链接

回答

相关问题