html - JQuery override element -


i have 8 items in list on hover expand content through code(i post code 1 item)

(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)); 

the issue occur when item in first row expand , override content of item above. how can prevent this?

css code

#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 code(only 1 item)

<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> 

change element position relative

position: relative 

Comments

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

asynchronous - Python asyncio task got bad yield -

javascript - Complete OpenIDConnect auth when requesting via Ajax -