我有一个功能,当我将鼠标悬停在文本段落上时添加信息 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 中。
鼠标悬停事件:
$('#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/>")
创建动态 div而不是document.createElement('div')
关于javascript - 将鼠标悬停在链接上后 Mouseenter 失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38959854/