jquery .hover() mouseenter 事件仅在触摸 div 的边框时触发

Question

我在div上实现了一个悬停工具栏。更多的时候不是悬停(mouseenter事件)不触发。

当我将鼠标停留在悬停的div的4px边界上时，我可以可靠地让它触发，但是如果我快速移动鼠标并在div中间停止，什么也不会发生。

这是我的jquery:

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

HTML是这样的:

<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>

.loveactions span是工具栏，默认设置为position:absolute, display:none。当我们将鼠标悬停在。lovediv上时，它会调用showLoveActions(e)方法，该方法会将span居中并将显示更改为block。

我已经排除了showLoveActions方法，因为当我用警报替换时，我遇到了相同的行为。

我怀疑mouseenter事件仅由4px边框触发，因此如果我移动鼠标太快，它不会被检测到。我很困惑，为什么div的其余部分不注册事件。

另一件奇怪的事情是，当mouseenter触发并出现工具栏时，当鼠标离开div时，总是调用hideLoveActions 。

我应该补充一下，页面上有许多。lovediv，它们绝对是通过jquery砌筑定位的。

.lovediv包含在id为lovespace的adiv中下面是不同元素的css:

#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;
}

Answer 1

假设没有…我找到bug了。它存在于我发布时非常自信的函数中。

还记得这个吗?

   showLoveActions(e)

在这个函数中，我假设e.a rtarget总是.love类。

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);
}

不是这样的。有时目标是:

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

其他时候的目标是:

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

我在方法的开头添加了这个测试:

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

经验教训:当.hover在一个复杂的div .target上运行时，可能会返回一个你意想不到的元素