jquery .hover() mouseenter event only triggered when div's border is touched

I am implementing a hovering toolbar on a div. More often the not the hover (mouseenter event) doesn't fire.

I can dependably get it to fire when I hold my mouse on the hovered div's 4px border, but if I move my mouse quickly and stop in the middle of the div, nothing happens.

Here's my jquery:

$(".love").hover(function(e){
    showLoveActions(e);
},function(e){
    hideLoveActions();  
});

The HTML looks like this:

<div id="lovespace">
<div class="love" style="width: 192px; height: 192px; position: absolute; left: 320px; top: 0px;">
    <span class="loveactions" id="0000000036">
       <ul>
       <li><a href="#" class="loveaction_love loveaction_grey">&hearts;</a></li>
           <li><a href="#" class="loveaction_addimpression">:D</a></li>
           <li><a href="#" class="loveaction_addtolist">&#10010;</a></li>
        </ul>
    </span>             
   <div class="loveimage" style="background-image:url(DataStorage/loveImages/{D7D4FB9D-5DBC-170A-1841-75FEF988881B}.jpg);width:192px;height:192px;">
       <div class="topBar">
          <div class="userName" style="color:#B3FFD6">I</div>
          <div class="loveHeart" loveid="0000000036">&hearts;</div> 
          <div class="numbers">
             <div class="circleLoves">1</div>
          </div>
       </div>
       <div class="bottomBar">
           <div class="loveName">Floating Weeds</div>
    </div>
</div>
</div>

The .loveactions span is the toolbar and it's set to position:absolute, display:none by default. When we hover on the .love div, it calls the showLoveActions(e) method which centers the span and changes the display to block.

I've ruled out the showLoveActions method because I encounter the same behavior when replaced with an alert.

I suspect that the mouseenter event is only triggered by the 4px border and so if I move the mouse too fast, it isn't detected. I'm stumped as to why the rest of the div doesn't register the event.

Another odd thing is that when the mouseenter does fire and th开发者_运维技巧e toolbar appears, hideLoveActions is always called when the mouse leaves the div.

I should add that there are many .love divs on the page and they are absolutely positioned via jquery masonry.

The .love div is contained inside of a a div with an id of lovespace Here is the css for the various elements as well:

#lovespace div.love
{
    display:inline;
    z-index:1;
    border-color: rgba(204, 70, 70, 1);
    border-width: 4px;
    margin:12px;
    border-style: solid;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    -opera-border-radius:6px;
    -khtml-border-radius:6px;
    border-radius:6px;
    -moz-box-shadow: rgba(0,0,0,0.5) 1px 1px 3px;
    -webkit-box-shadow:rgba(0,0,0,0.5) 1px 1px 3px;
    -opera-box-shadow: rgba(0,0,0,0.5) 1px 1px 3px;
    -khtml-box-shadow:rgba(0,0,0,0.5) 1px 1px 3px;
    box-shadow: rgba(0,0,0,0.5) 1px 1px 3px;


}

#lovespace div.love div div.topBar
{
     background-color: rgba(0,0,0,.5);
     color:white;
     width:100%;
     line-break: 26px;
}
#lovespace div.love div.loveimage
{
    position:relative;
}
#lovespace div.love div div.topBar div.userName
{
    display: inline-block;
    margin-left: 4px;
    padding: 4px;
    text-shadow: 1px 1px 3px black;
    font-weight: bold;
    font-size: 22px;
}
#lovespace div.love div div.topBar div.loveHeart
{
    text-shadow: 1px 1px 3px black;
    color: #cc2424;
    font-size:26px;
    display: inline-block;
    margin-left:2px;
    padding:2px;

}
#lovespace div.love div div.topBar div.loveHeart_notLoved
{
    color:rgba(170,160,160,1);
    text-shadow: 1px 1px 3px black;
}
#lovespace div.love div div.topBar div.numbers
{
    float:right;
    margin-top:4px;
    margin-right:4px;
    line-height:26px;
}

#lovespace div.love div div.topBar div.numbers div.circleLoves
{
    font-weight: bold;
    color: white;
    background-color: #2ab239;
    display: inline-block;
    padding:4px;
    padding-top:2px;
    padding-bottom: 2px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    -opera-border-radius:6px;
    -khtml-border-radius:6px;
    border-radius:6px;
    font-size:14px;

}

#lovespace div.love div div.bottomBar
{
     position: absolute;
     background-color: rgba(0,0,0,0.5);
     color:white;
     bottom: 0px;
     left: 0px;
     width: 100%;
}
#lovespace div.love div div.bottomBar div.loveName
{
    padding:4px;
    margin-left:4px;
    float:left;
    text-shadow: 1px 1px 2px black;
    font-weight: bold;
    font-size: 22px;
}

Assume nothing... I found the bug. And it resided in the function I was so confident in when I posted.

Remember this?

   showLoveActions(e)

In this function, I assumed that e.target would always be the .love class.

function showLoveActions(e)
{
    var love = $(e.target)
var loveactions = love.children(".loveactions");
//alert(loveactions);
loveactions.fadeIn(100);//.css("display", "block");
var loveactionTop = ((love.height()-loveactions.height())/2)-8;
var loveactionLeft = ((love.width()-loveactions.width())/2)-8;
loveactions.css("top",loveactionTop);
loveactions.css("left",loveactionLeft);

}

Not so. Sometimes the target was:

<div class="loveName">Floating Weeds</div>

Other times the target was:

<div class="userName" style="color:#B3FFD6">I</div>

I added this test to the beginning of the method:

    var love;
if(! $(e.target).hasClass("love"))
{
    love = $(e.target).parents(".love");

}
else
{
    love = $(e.target);

}

Lesson learned: When .hover is operating on a complex div e.target can return an element you weren't expecting.