Question

我创建了一个显示当前天气和弹出式div的div，显示了5天的预测。

这是我的jQuery代码：

    $('.weather-popup').hide();
    $('.weather-current,.weather-popup').click(function(event){ 
    $('.weather-popup').toggle(400);
        event.stopPropagation();
    });

    $("html").click(function() {
    $(".weather-popup").hide(300);
    });

.weather-current是显示当前天气的div，而.weather-popup显示5天的预测。

使用.click（）函数，它工作得很好，但是如何使用.hover（）函数完成此操作？

首先我尝试过这样：

$(".weather-current").hover(function(){
    $('.weather-popup').stop().show(500);
    }, function(){
        $('.weather-popup').stop().hide(500);
    });

当我在.current-weather上盘旋时，.weather-popup显示正确，但是当我将鼠标悬停在.weather-popup上时，div当然隐藏了。

当我悬停在.weather-current时，如何设置该组合，.weather-popup将显示，之后当我将鼠标悬停在.weather-current时，该div将保持打开状态？

Answer 1

您可以使用计时器隐藏weather-current

鼠标左键的弹出窗口

jQuery(function ($) {
    $(".weather-current").hover(function () {
        var $target = $('.weather-popup');
        clearTimeout($target.data('hoverTimer'));
        $target.stop(true, true).slideDown(500);
    }, function () {
        var $target = $('.weather-popup');
        var timer = setTimeout(function () {
            $target.stop(true, true).slideUp();
        }, 200);
        $target.data('hoverTimer', timer);
    });

    $('.weather-popup').hover(function () {
        clearTimeout($(this).data('hoverTimer'));
    }, function () {
        $(this).stop(true, true).slideUp();
    });
});

.weather-popup {
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="weather-current">weather-current</div>
<div class="weather-popup">weather-popup</div>

Answer 2

发生的可能是因为您的HTML代码中div.weather-popup不是div.weather-current的孩子。

jQuery使用不同的事件悬停两个div

2 个答案: