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）方法，该方法将范围居中并将显示更改为阻止。

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

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

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

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

.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可以返回你不期望的元素。

jquery .hover（）mouseenter事件仅在触及div的边界时触发

1 个答案: