jQuery hide + hover issue

Click the black square, move the cursor towards the bottom of the green box + click to hide. Hold still on the mouse and notice the box is no longer hovered over but the hover effect is still present???

HTML

<div class="tester">
    <div class="content">
        apple, banana, carrot, lettuce, celery, beetroot
    </div>
</div>

CSS

.tester
{
   width:100px;
   height:100px;
   background-color:Black; 
   padding: 10px;
}

.tester .content
{
   display:none;
   color:White;
   height:500px;
   background-color:green; 
}

.tester:hover
{
   background-color:red; 
}

JavaScript

$('.tester').click(function () {
        $(this).children('.content').toggle();
    });