Hawkeye Hawkeye - 3 months ago 13
HTML Question

Mouseenter failing after hovering over a link

I have a function that adds a information div when I hover over a text paragraph, but when I go from normal text in the paragraph to a hyperlink the mouseover event stops and wont restart until my mouse leaves the paragraph and re-hover over it. It will display if I start on the link but it will always stop if I go from a link to text or text to the link.

Paragraph examples:

<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>


When I hover over the paragraph it converts the date number class into a human readable date and it is displayed in a div.

Mouseover event:

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


Is there anyway to fix this from removing the div when I hover over links?

Answer

There is a typo mistake in your code, extra closing bracket which causes this issue, below is the corrected code

$(function() {
$('#NoteHolder').on( "mouseenter", ".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>

As you are using a jQuery, you can create a dynamic div by $("<div/>") rather than document.createElement('div')

Comments