鼠标悬停在链接上后进入失败

Mouseenter failing after hovering over a link

本文关键字：失败 悬停 链接 鼠标      更新时间：2023-09-26

我有一个函数，添加一个信息div当我悬停在一个文本段落，但当我从正常文本在段落到一个超链接鼠标悬停事件停止，不会重新启动，直到我的鼠标离开段落，并重新悬停在它。如果我从链接开始，它会显示，但如果我从链接跳转到文本或从文本跳转到链接，它总是会停止。

段落例子:

<div id="NoteHolder">
    <div class="wrap">
        <p class="NoteOp inline date1471280868332">Example sentence <a target="_blank" class="a" href="https://www.example.com">https://www.example.com</a></p>
    </div>
</div>

当我将鼠标悬停在段落上时，它会将日期数字类转换为人类可读的日期，并显示在div中。

Mouseover事件:

$('#NoteHolder').on( "mouseenter", ".NoteOp", function() {
    var Info = document.createElement('div');
    Info.className = 'EditInfo'
    var DateP = document.createElement('p');
    DateP.className = 'DivP';
    var DatePT = document.createTextNode(PT)
    DateP.appendChild(DatePT);
    Info.appendChild(DateP);
    var position = $(this).position();
    var thisX = position.left;
    var thisY = position.top;
    var thisWidth = $(this).width();
    var thisHeight = $(this).height();
    var PageW = $('html').width();
    if(thisX + thisWidth + 50 > PageW) {
        $(Info).css({
            "left": thisX + thisWidth + 20,
            "top": thisY - 10
        });
    }
    document.getElementById("NoteHolder").appendChild(Info);
});
$('#NoteHolder').on( "mouseout", ".NoteOp", function() {
    $(".EditInfo").remove();
});

是否有办法从删除这个div当我悬停在链接?

你的代码中有一个打字错误，额外的右括号导致了这个问题，下面是更正后的代码

$(function() {
$('#NoteHolder').on( "mouseover", ".NoteOp", function() {
    alert("Enter");
    var Info = document.createElement('div');
    Info.className = 'EditInfo'
    var DateP = document.createElement('p');
    DateP.className = 'DivP';
    var DatePT = document.createTextNode(PT)
    DateP.appendChild(DatePT);
    Info.appendChild(DateP);
    var position = $(this).position();
    var thisX = position.left;
    var thisY = position.top;
    var thisWidth = $(this).width();
    var thisHeight = $(this).height();
    var PageW = $('html').width();
    if(thisX + thisWidth + 50 > PageW) {
        $(Info).css({
            "left": thisX + thisWidth + 20,
            "top": thisY - 10
        });
    }
    document.getElementById("NoteHolder").appendChild(Info);
   
});
$('#NoteHolder').on( "mouseout", ".NoteOp", function() {
    alert("Exit");
    $(".EditInfo").remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="NoteHolder">
    <div class="wrap">
        <p class="NoteOp inline date1471280868332">Example sentence <a target="_blank" class="a" href="https://www.example.com">https://www.example.com</a></p>
    </div>
</div>

当您使用jQuery时，您可以通过$("<div/>")而不是document.createElement('div')创建动态div

相关文章：