CODEWITHSUNDEEP
javascriptjquerycss
AgeDeO
AgeDeO

Reputation: 3147

Close hover div only when clicked outside block

I have got a loginbox (blue) that opens when you hover over the text login (Yellow). The box stays open when you go to the loginbox but it closes when you leave it (Mouse in the green area).

This is expected behaviour with my current css (using hover and display:none / block)

I would like the loginbox (blue) to stay open even when you enter the green area. But when you click in the green area the loginbox (blue) closes (display: none)

I guess this is only possible with javascript/jQuery but I have no idea how. Can anyone help me with this?

Don't worry about div id's and classes. I will change the code to my needs.

enter image description here

Upvotes: 0

Views: 2739

Answers (2)

Steely Wing
Steely Wing

Reputation: 17637

Try this http://jsfiddle.net/steelywing/gnyyB/

$('#main').mouseenter(function () {
    $('#menu').show();
});

// To prevent hide #menu when click on #main
$('#main').click(function (e) {
    e.stopPropagation();
});

// Click outsite of #menu
$('html').click(function () {
    $('#menu').hide();
});

Upvotes: 2

PSR
PSR

Reputation: 40338

you can use

   function example(){  

   var divId = document.getElementById("divId");

   divId.style.display = "block";

  }

Here divId is the blue color divId and call this function in onhover for green div.

Upvotes: 0

Related Questions