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
Post a Comment