javascript - How to use force Jquery mouseenter fadein over again? -

i'm trying set menu, hover on photo show person name , links underneath image-menu. used mouseenter , fadein hover effect, coupled css class has background color set white (so new item cover old one). when try hover menu item has been shown, nothing happens. also, hover not work on items. when hover left, hover not function on 3 items. when hover right side, first 2 items work. please suggest issues be, , how these resolved? please note need have menu shows when mouseover shown, user can click links provided there.

script:

 $(document).ready(function() {     $("#pau").mouseenter(function(){         $("#paup").fadein(600);     });     $("#red").mouseenter(function(){         $("#redp").fadein(600);     });     $("#aesthet").mouseenter(function(){         $("#aesthetp").fadein(600);     });     $("#danny").mouseenter(function(){         $("#dannyp").fadein(600);     });     $("#kisic").mouseenter(function(){         $("#kisicp").fadein(600);     });     $("#fake").mouseenter(function(){         $("#fakep").fadein(600);     });     $("#kaa").mouseenter(function(){         $("#kaap").fadein(600);     });     $("#heels").mouseenter(function(){         $("#heelsp").fadein(600);     });     $("#hodanajan").mouseenter(function(){         $("#hodanajanp").fadein(600);     });     $("#jakub").mouseenter(function(){         $("#jakubp").fadein(600);     }); }); 

html:

<div class='people'> <div class='containertriangles'>     <div class='wrap' id='aesthet'>         <div class='crop'>             <img src='./img/triangles/aesthet.jpg'>         </div>     </div>     <div class='wrap' id='fake'>         <div class='crop'>             <img src='./img/triangles/afakeartist.jpg'>         </div>     </div>     <div class='wrap' id='danny'>         <div class='crop'>             <img src='./img/triangles/dannyrose.jpg'>         </div>     </div>     <div class='wrap' id='heels'>         <div class='crop'>             <img src='./img/triangles/heelsinprague.jpg'>         </div>     </div>     <div class='wrap' id='hodanajan'>         <div class='crop'>             <img src='./img/triangles/hodanajan.jpg'>         </div>     </div>     <div class='wrap' id='jakub'>         <div class='crop'>             <img src='./img/triangles/jakubmarik.jpg'>         </div>     </div>     <div class='wrap' id='kaa'>         <div class='crop'>             <img src='./img/triangles/kaaglo.jpg'>         </div>     </div>     <div class='wrap' id='pau'>         <div class='crop'>             <img src='./img/triangles/paulinemma.jpg'>         </div>     </div>     <div class='wrap' id='red'>         <div class='crop'>             <img src='./img/triangles/redpoppy.jpg'>         </div>     </div>     <div class='wrap' id='kisic'>         <div class='crop'>             <img src='./img/triangles/sandrakisic.jpg'>         </div>     </div> </div> 

css:

#aesthetp, #dannyp, #fakep, #heelsp, #hodanajanp, #jakubp, #kaap, #kisicp, #paup, #redp{ display:none; position:absolute; left:0; right:0; margin-top:-70px; background-color:white;} 

im using triangular layout got here: http://codepen.io/mikehobizal/pen/ehdsu

your appreciated.

i start restructuring html utilize reusable classes instead of id's , nesting content inside of each link easy reference.

<div class='wrap link'>     <div class='crop'>         <img src='./img/triangles/jakubmarik.jpg'>     </div>     <div class="content">       text , other stuff here     </div> </div> 

then can simplify javascript:

$(".link").mouseenter(function(){     $(.content').hide();      $(this).find('.content').fadein(600); }); 

this hide content divs , show 1 nested in div over.

you should still able absolute position content divs long entire nav wrapped , has position:relative.