javascript - 如何再次使用强制 Jquery mouseenter fadein？

Question

我正在尝试设置一个菜单，将鼠标悬停在照片上会显示人名和图像菜单下方的一些链接。我使用 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;}

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

非常感谢您的帮助。

Answer 1

我会首先重组您的 html 以利用可重用的类而不是 id，并将内容嵌套在每个链接内，以便于引用。

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

然后你可以简化javascript:

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

这将隐藏所有内容 div 并显示嵌套在您当前所在的 div 中的那个。

只要整个导航被包裹并且具有 position:relative，您仍然应该能够对内容 div 进行绝对定位。