Question

我在列表中有8个项目，在悬停时通过此代码扩展其内容（我只发布一个项目的代码）

(function($){
"use strict";
jQuery("#foto-chiara").click(function() {
    if($("#foto-chiara").css('top') == '0px'){
 $("#foto-chiara").stop().animate({top:$("#bio-chiara").height() +'px'},1000);
 }else{


 $("#foto-chiara").stop().animate({top:'0px'},1000);
 };
 $("#info-chiara").toggle(500);
 });


 }(jQuery));

当第一行中的项目展开并覆盖上述项目的内容时，会出现此问题。我该如何防止这种情况？

Css代码

#foto-chiara{
background-image:url("http://www.aspeera.it/wp-content/uploads/2015/04/Chiara_foto1.png");width:200px;height:200px;position:absolute;top:0px;
}
#info-chiara{
display:none;
background-image:url("http://www.aspeera.it/wp-content/uploads/2015/04/Chiara_fondo1.png");
width:200px;
height:150px;
position:absolute;
}

HTML代码（只有一个项目）

<ul class="container_info">
    <li class="info-persone" id="bio-chiara" style="position:relative; height:300px;">
           <div id="foto-chiara">
           </div>
           <div id="info-chiara">
           <p>Chiara è una runner, questo dice molto di lei: tenace e con un'energia infinita. </p>
           </div>
    </li>

Answer 1

将元素位置更改为相对

position: relative

JQuery覆盖元素

1 个答案: