CODEWITHSUNDEEP
jqueryhover
user2519032
user2519032

Reputation: 829

jQuery hover two divs with different events

I've created one div that shows current weather and popup div that shows 5 day forecast.

This is my jQuery code:

    $('.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 is the div that shows the current weather and .weather-popup shows 5 day forecast.

With .click() function it's working great, but how do I accomplish this with .hover() function?

First I've tried like this:

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

When I hover on .current-weather the .weather-popup is showing correctly, but when I hover on the .weather-popup, the div its hiding of course.

How can I set that combination when I hover on .weather-current, the .weather-popup will show and after that when I hover on .weather-current, that div to be stay opened?

Upvotes: 1

Views: 89

Answers (2)

danielg44k
danielg44k

Reputation: 55

It's happend propably beecause in your HTML Code div.weather-popup is not a children of div.weather-current.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You can use a timer to hide the popup on mouseleave of 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>

Upvotes: 2

Related Questions