CODEWITHSUNDEEP
javascriptjquerycsshtml
Omar Tariq
Omar Tariq

Reputation: 7724

Keep a second div visible if the mouse is over the first or second div

There are two divs; Div A (display:none by default) and Div B (visible all the time). How would one make it so if mouse moves over Div B, Div A becomes visible. Div A should remain visible if the mouse cursor is on either Div A or Div B, otherwise Div A should be hidden.

I'm using jQuery plugin hoverIntent for this.

$(".the-dropdown").hoverIntent( function(){
        $(".the-dropdown").show();
    }, function(){
        $(".the-dropdown").hide();
});

$(".menu-item").hoverIntent( function(){
    $(".the-dropdown").show();
}, function(){
    $(".the-dropdown").hide();
});

jsfiddle

Upvotes: 1

Views: 1313

Answers (2)

apaul
apaul

Reputation: 16180

hoverIntent is a plug-in that attempts to determine the user's intent... like a crystal ball, only with mouse movement! It is similar to jQuery's hover method. However, instead of calling the handlerIn function immediately, hoverIntent waits until the user's mouse slows down enough before making the call.

Why? To delay or prevent the accidental firing of animations or ajax calls. Simple timeouts work for small areas, but if your target area is large it may execute regardless of intent. That's where hoverIntent comes in...

If you would like to use the hoverIntent plugin you can download it here:
http://cherne.net/brian/resources/jquery.hoverIntent.html

Working Example Using hoverIntent

$(".menu-item").hoverIntent({
    over: function () {
        $(".the-dropdown").slideDown();
    },
    out: function () {
        $(".the-dropdown").slideUp();
    },
    timeout: 500,
    interval: 500
});

<div class="menu-item">Hover this for half a second
    <div class="the-dropdown"></div>
</div>

div {
    height: 200px;
    width: 200px;
}
.the-dropdown {
    background: red;
    display: none;
    position:relative;
    top:182px;
}
.menu-item {
    background: blue;
}

Upvotes: 1

Chad
Chad

Reputation: 5428

Hmm, try something like this.

HTML:

<div id="a"></div>
<div id="b"></div>

CSS: 

div {
    height: 200px;
    width: 200px;
}
#a {
    background: #0f0;
    display: none;
}
#b {
    background: #f0f;
}

JS:

$('#a, #b').hover(function() {
    $('#a').show(); 
}, function() {
    $('#a').hide();    
});

Fiddle

Or in your specific case: 

$(".the-dropdown, .menu-item").hover( function(){
        $(".the-dropdown").show();
    }, function(){
        $(".the-dropdown").hide();
});

Upvotes: 3

Related Questions