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。 / p>

我尝试使用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/

鼠标悬停在另一个div上显示div并关闭具有相同类的所有其他div

3 个答案: