[jQuery] Help! Problem with using show/hide with divs
Hello,
I'm trying to create a script that would allow me to display a div
element when the user's mouse entered a specific div, and then have
that div close when you existed that specific div There would be about
boxes in all .
My current problem is that the #showbox closes as soon as the mouse
leaves the text... I would like to tie this event to when you leave
the Div that the text is in, and not the text itself. So far I have
only been able to tie the opening and closing of the box to the small
hit area of the next. I'm still somewhat of a newb at this, and I'm
sure I'm missing something elementary..... thanks so much for looking.
Here is the HTML for one box:
<td>
<div class="shoxboxtrigger partners">
<a href="#" class="showboxtrigger">The California Endowment </a>
<div id="showbox"> realtionship information</div>
</div>
</td>
CSS
.partners{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #6A3090;
background-color: #EAE2EF;
margin: 10px;
padding: 15px;
}
Here is the JQuery
var clicked;
//show box
$(".showboxtrigger").mouseover(function(){
clicked= $(this).next();
$(clicked).show("slow");
return false;
});
$(".showboxtrigger").mouseout(function(){
$(clicked).hide("fast");
return false;
});