jquery - 防止 div 从 slideDown()

Question

我有以下内容：

http://jsfiddle.net/2sQGS/

它工作得很好，除了我不希望当我将鼠标悬停在它上面时，它会向下滑动。我猜这是因为我不再悬停该块，但我想以某种方式从任何操作中停用宣传框。

如果您需要更多信息，请告诉我，并提前感谢您的宝贵时间。

干杯，史蒂夫

Answer 1

我是 jQuery 的新手，所以希望其他人很快会为您的问题提出更好的解决方案，但我要做的（有效的）是将 .toggle-block 和 .blurb 简单地保存在另一个 div.container 块中。

所以你会有这个 html 结构：

<div class="block">
    <div class="container">
        <a class="toggle-block"><img src="http://www.northareadevonfootball.co.uk/Images/football.jpg"></a>
        <div class="blurb">
            <h2>Title here</h2>
            <p>Hello there, this is a test to take the content over one line so I can see what the line height looks like.</p>
        </div>
    </div>
</div>

然后您只需将其更改为您的 jquery 代码：

$('.container').mouseleave(function() {
     $('.blurb').stop().slideUp(500);
});

它有效...不过还有一些需要改进的地方...如果您需要更多帮助并祝您的项目好运，请告诉我！

Answer 2

如果您希望该框留在那里，请删除以下行，您就可以了：

    $('.toggle-block').mouseleave(function() {
        $(this).siblings('.blurb').stop().slideUp(500);
    });

如果您想在鼠标不在球上时隐藏该框，请通过以下方式更改这些行：

    $('.toggle-block').mouseleave(function() {
        $(this).siblings('.blurb').stop().hide();
    });

Answer 3

可能这就是你想要的

(function($) {
    $(document).ready(function(){
        var check = true;                   
        $('.toggle-block').mouseenter(function() {
            if(check){
            $(this).siblings('.blurb').slideDown(1000);
                check = false;
            }
        });

        $('.toggle-block').mouseleave(function() {
            $(this).siblings('.blurb').stop().slideUp(500);
        });

    });
})(jQuery);​