I want to be able to:
1. Click a div element (A) to display, adjacent to it, another div element (B).
2. Hover over A or B without B disappearing.
3. B disappears if hover outside A and B.

My divs are:

<div id="A" style="width:100px; height:100px; position:absolute; left:100px; top:100px">Summary....</div>
<div id="B" style="width:100px; height:100px; position:absolute; left:200px; top:100px; display:none"></div>

I display B on clicking A using the display attribute:

$(document).ready(function () {
 $("#A").click(function () {
  $("#B").html("Detail....");
  $("#B").show();
 });

});

This works fine.

What is the function or functions to achieve 2 and 3 above?

Your help would be much appreciated.

Thanking you in anticipation.

Roger