Jquery:When hovering over P, div fades in centered over that P, but when mouse hovers over that div, it creates mouse-out effect

Question

This is what my code does: if #placeBookmark has the class .placing, then when i hover over paragraphs it fades in #bookmarkThis. #bookmarkThis is just a div with the words "bookmark this" in it, this div is appended to the page when the page loads, and is centered over the paragraph that's being hovered, then fades out on mouse-out.

My problem/question: When i hover the paragraph, it fades in on that paragraph, and is centered, but when my mouse moves over #bookmarkThis(which is the Div that fades in), then it fades out, like i moused-off of the paragraph. How do i keep #bookmarkThis from messing up my Paragraph hover?

Note: #bookmarkThis is appended to the body on page load(it's not a child of P), then positioned relative to the P being hovered.

$('p').hoverIntent(function () {
    var myObject = $('#bookmarkThis')
    var topp = $(this).offset().top + ($(this).height() / 2) - (myObject.outerHeight() / 2)
    var leftt = $(this).offset().left + ($(this).width() / 2) - (myObject.outerWidth() / 2)

    if ($('#placeBookmark').hasClass('placing')) {   
        $(this).animate({color: "#999999", backgroundColor: "#f5f5f5"}, 400)
        $('#bookmarkThis').css({'left': leftt, 'top':topp}).fadeIn(200)
    }
}, function() {
    $(this).stop().animate({color: "#333", backgroundColor: "#fff"}, 200)
    $('#bookmarkThis').fadeOut(200)

});

Answer 1

You can append the bookmark this button to paragraph and then remove it once you hover out of the paragraph.