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。当我们将鼠标悬停在 .love div 上时，它会调用 showLoveActions(e) 方法，该方法将 span 居中并将显示更改为块状。

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

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

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

我应该补充一点，页面上有很多 .love div，它们绝对是通过 jquery masonry 定位的。

.love div 包含在一个 id 为 lovespace 的 div 中 以下是各种元素的 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

假设什么...我发现了错误。它存在于我发布时非常有信心的功能中。

还记得吗？

   showLoveActions(e)

在这个函数中，我假设 e.target 始终是 .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 上运行时，e.target 可能会返回一个您没有预料到的元素。