jQuery mouseenter/mouseleave 问题答案

【问题标题】：jQuery mouseenter/mouseleave issuejQuery mouseenter/mouseleave 问题
【发布时间】：2014-09-19 04:13:55
【问题描述】：

我觉得我的问题很愚蠢，但我无法解决它。我在一个容器中有两个 div，其中一个默认隐藏。当鼠标悬停在父 div 上时，我想用 slideDown 显示隐藏的 div 并隐藏另一个。当我将鼠标从 div 上方移动到底部时，它工作得很好，但是如果我从底部移动鼠标，它会上下滑动一段时间。这里我有一个小提琴：

[编辑]

我忘了说我需要它来处理动态创建的 div。

http://jsfiddle.net/7gva4fad/

jQuery(document).on({
    mouseenter: function () {
        jQuery(this).find('.msg').hide();
        jQuery(this).find('.conv').slideDown(300);        
    }
}, ".tooltip");

jQuery(document).on({
    mouseleave: function () {
        jQuery(this).find('.conv').slideUp(300);
        jQuery(this).find('.msg').show();
    }
}, ".tooltip");

.tooltip{
    width: 250px;
    height: 30px;
    border: 1px solid #000;
}
.conv{
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="tooltip">
    <div class="conv">Hello again</div>
    <div class="msg">Hello world</div>
</div>

任何想法都值得赞赏。

【问题讨论】：

在您的消息正文中包含相关代码以及提供 jsfiddle 链接通常是体贴的。即使您的代码不再托管在 jsfiddle 上，这也可以确保您的问题在未来仍然有效。
当您将鼠标悬停在元素上时，它会立即隐藏.msg，并且父容器（.tooltip）的高度突然变为0，这意味着鼠标离开元素并触发离开功能。
谢谢@WoodrowBarlow，我会记住的（：
@JRulle 我明白了你所说的，并为.tooltip div 添加了一个静态高度，但它一直在上下滑动。我错过了什么吗？谢谢！
stackoverflow.com/questions/11288516/…（只是使用 mouseenter 代替鼠标悬停）

标签： jquery css

【解决方案1】：

jQuery(function($) {

    $('.tooltip').hover(function() {
        $('.msg, .conv', this).stop().slideToggle();
    });
   
});

.tooltip{
    width: 250px;
    border: 1px solid #000;
}
.conv{
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tooltip">
    <div class="conv">Hello again</div>
    <div class="msg">Hello world</div>
</div>

【讨论】：

完美运行（：，只是一个问题，hover和mouseenter/mouseleave有什么区别？哪个更好？非常感谢（：
@Cassandra .hover() 方法（注意：not .on('hover'...)!）是 .on mouseenter mouseleave 事件监听器。
同样，你可以使用$(this).bind('mouseenter', 'mouseleave')，很确定那里没有真正的区别。
我是说绑定到 mouseenter 和 mouseleave 与绑定到悬停是一样的：api.jquery.com/hoverhover 是这两个事件的简写，如果你不这样做，你可以交替使用 .bind()比如将处理程序传递给.hover()，AFAIK。很抱歉在这里与你相矛盾，伙计。放松。

【解决方案2】：

如果您首先隐藏.msg DIV，则会调用mouseleave 事件，因为.tooltip DIV 的高度为0。

试试这样的：

jQuery(document).on({
    mouseenter: function () {
        jQuery(this).find('.msg').stop(false, true).slideUp(300);
        jQuery(this).find('.conv').stop(false, true).slideDown(300);        
    }
}, ".tooltip");

jQuery(document).on({
    mouseleave: function () {
        jQuery(this).find('.conv').stop(false, true).slideUp(300);
        jQuery(this).find('.msg').stop(false, true).slideDown(300);
    }
}, ".tooltip");

http://jsfiddle.net/7gva4fad/2/

【讨论】：

我结束了使用您的解决方案，因为它更适合我的项目（：并且无法使用 on({hover 并且我需要它，因为我的 div 是动态创建的。您的答案很完美，谢谢（：
我只是尽可能少地更改了您的解决方案；）但是谁给了我-1，为什么？