如何再次使用强制Jquery mouseenter淡入淡出？答案

【问题标题】：How to use force Jquery mouseenter fadein over again?如何再次使用强制Jquery mouseenter淡入淡出？
【发布时间】：2015-10-31 11:26:25
【问题描述】：

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

非常感谢您的帮助。

【问题讨论】：

我看不出有什么问题...
@eugensunic 你指的是哪一个？我提供的链接只是我使用的 css 的一个示例。我的 html 不同，我添加了脚本，该脚本不在原始代码中。问题是当鼠标悬停回到已经悬停的菜单项时，它不起作用。
哦，对不起，你为什么不把你的代码放在一个单独的非工作小提琴中
那么，您的代码在哪里不起作用？

标签： javascript jquery html css mouseenter

【解决方案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 中的那个。

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

【讨论】：

【解决方案2】：

jQuery fadeIn 函数仅适用于隐藏元素！所以淡入后需要再次隐藏。

这个例子展示了如何重新隐藏你的元素，然后再次淡入：

$("#pau").mouseenter(function(){
    $("#paup").hide().fadeIn(600);
});

【讨论】：