如何再次使用强制Jquery鼠标输入法

我正在尝试设置一个菜单，将鼠标悬停在照片上会显示人名和图像菜单下的一些链接。我使用mouseenter和fadein来实现悬停效果，再加上一个背景色设置为白色的css类（这样一个新项目就会覆盖旧项目）。当我试图将鼠标悬停回已经显示的某个菜单项时，什么都不会发生。此外，悬停在某些项目上不起作用。当我从左边悬停时，悬停在三个项目上不起作用。当我从右侧悬停时，只有前两项有效。你能建议一下可能存在的问题，以及如何解决这些问题吗？请注意，我需要有当鼠标悬停时显示的菜单，这样用户就可以点击那里提供的链接。

脚本：

 $(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;}

我使用的是从这里得到的三角形布局：http://codepen.io/mikehobizal/pen/EHDsu

非常感谢你的帮助。