Question

我有以下内容：

它工作正常，但我不希望当我将鼠标悬停在它上面时，模糊框会向下滑动。我猜它是因为我不再徘徊在街区，但我想以某种方式停止任何动作的模糊框。

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

干杯，史蒂夫

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);

从slideDown（）中防止div

3 个答案: