将鼠标悬停在另一个div上时显示div，然后关闭具有相同类的所有其他div

Question

我有一个div列表（简化示例）

<div class="title">text</div>
<div class="description">text</div>
<div class="title">text</div>
<div class="description">text</div>
<div class="title">text</div>
<div class="description">text</div>

当我将鼠标悬停在一个标题上会显示对该标题的描述时， .description在页面加载时会隐藏，当我将鼠标悬停在另一个标题上时会显示对该标题的描述，但是我还想做的是隐藏最后一个.description是开放的。

我尝试使用mouseout ， mouseleave等，但没有成功。 有什么建议么？

    $('.title').mouseover(function () {
            $(this).next().fadeIn('fast');
        });

        $('.title')..mouseleave(function () {
            $(this).next().slideOut('fast');
        });

这样，如果我再次将鼠标悬停在同一标题上，而不是其他标题上，我将隐藏描述。

    jQuery.fn.fadeToggle = function (speed, easing, callback) {
        return this.animate({ opacity: 'toggle' }, speed, easing, callback);
    };

    $('.title').mouseover(function () {
            $(this).next().fadeToggle('fast');
    });

Answer 1

您可以指定它们的类选择器以全部隐藏它们，这样，一次只显示其中一个：

   $('.title').mouseover(function () {
     $('.description').hide();
     $(this).next().fadeIn('fast');
   });

Answer 2

您在这里打错了：

$('.title')..mouseleave(function () {

有两个时期。

希望能帮助到你。

Answer 3

如果使用正确的函数，您的代码将起作用。 没有 slideOut方法。 使用fadeOut()或slideUp() ，例如：

$('.title').mouseover(function () {
    $(this).next().fadeIn('fast');
});

$('.title').mouseleave(function () {
    $(this).next().fadeOut('fast');
});

请参阅： http ： //jsfiddle.net/Tjcvz/