将鼠标悬停在链接

时间:2016-08-15 17:25:14

标签: javascript jquery html hover

当我将鼠标悬停在文本段落上时,我有一个添加信息div的函数,但是当我从段落中的普通文本转到超链接时,mouseover事件会停止并且不会重新启动,直到我的鼠标离开段落并重新悬停超过它。如果我从链接开始,它将显示,但如果我从链接到文本或文本到链接,它将始终停止。

段落示例:

<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显示。

鼠标悬停事件:

$('#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();
});

当我将鼠标悬停在链接上时,有没有解决这个问题?

0 个答案:

没有答案