CODEWITHSUNDEEP
jqueryshow-hide
dstonek
dstonek

Reputation: 975

Hover any link then hide certain div

I summarize my issue: http://jsfiddle.net/marciano/BSzAn/

I have some links

<a href="">Some text 1</a>
<a href="">Some text 2</a>
<a href="">Some text 3</a>
<a id="menu" href="">MENU</a>
<a id="submenu" href="">SUBMENU</a>

And js

$(function() {
      $('#submenu').hide();
      $('#menu').hover( function() { $('#submenu').show(); } );
});

When I hover MENU, SUBMENU shows up.

What I need is to hide 'submenu' when I hover any of the other links but 'menu'. Thank you

Upvotes: 0

Views: 78

Answers (2)

PSL
PSL

Reputation: 123739

Try this:-

Demo

   $(function () {
    $('#submenu').hide();
    $('#menu').hover(function () {
        $('#submenu').show();
    });
    $('a:not(#menu,#submenu)').hover(function () {
        $('#submenu').hide();
    })
});

Upvotes: 2

MG_Bautista
MG_Bautista

Reputation: 2653

Use this...

$('#menu').hover( function() { $('#submenu').show(); }, function() { $('#submenu').hide(); } );

Or use this...

$('#submenu').hide();
$('#menu').hover( function() { $('#submenu').toggle(); } );

See this DEMO

Upvotes: 0

Related Questions