1

Есть такая задача: когда мы навели на блок, то показывается информер. Нужно, чтобы при наведении он запомнил координаты и больше за курсором не ходил.

$(".ifrs-md").hover(function() {
    var txt = $(this).data("text");
    var pos = $(this).offset();

    ns4 = (document.layers) ? true : false
    ie4 = (document.all) ? true : false

    function init() {
        if (ns4) {
            document.captureEvents(Event.MOUSEMOVE);
        }
        document.onmousemove = mousemove;
    }
    function mousemove(event) {
      
        let mouse_x = y = 0;
        if (document.attachEvent != null) {
            mouse_x = window.event.pageX;
            mouse_y = window.event.pageY;
            
        } else if (!document.attachEvent && document.addEventListener) {
            mouse_x = event.pageX;
            mouse_y = event.pageY;
        }
        status = "x = " + mouse_x + ", y = " + mouse_y;
        let X = mouse_x;
        let Y = mouse_y;
        $(".informers").text(txt).css({
            top:  20 + Y + "px",
            left: 20 + X + "px"                
        });
    }
    
    init();
    $(".informers").css({
        display: "block"
    });

}, function() {
    $(".informers").css({
        display: "none",
        top:  0,
        left: 0
    }).text("");
});
.quote-day {
   height: 150px;
    width: 150px;
    border: 1px solid red;
}
.informers {
    line-height: 22px;
    position: absolute;
    z-index: 30;
    display: none;
    width: 300px;
    padding: 30px;
    text-align: left;
    background: #fff;
    -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, .1);
    box-shadow: 0 0 25px rgba(0, 0, 0, .1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quote-day ifrs-md" data-text="Текст">
asdasdasd
</div>
<div class="informers"></div>

0

1 ответ 1

1

Не ходить за курсором значит не слушать больше mousemove(event).

    $(".ifrs-md").hover(function() {
        var txt = $(this).data("text");
        var pos = $(this).offset();

        ns4 = (document.layers) ? true : false
        ie4 = (document.all) ? true : false

        function init() {
            if (ns4) {
                document.captureEvents(Event.MOUSEMOVE);
            }
            document.onmousemove = mousemove;
        }
        function mousemove(event) {
          
            let mouse_x = y = 0;
            if (document.attachEvent != null) {
                mouse_x = window.event.pageX;
                mouse_y = window.event.pageY;
                
            } else if (!document.attachEvent && document.addEventListener) {
                mouse_x = event.pageX;
                mouse_y = event.pageY;
            }
            status = "x = " + mouse_x + ", y = " + mouse_y;
            let X = mouse_x;
            let Y = mouse_y;
            $(".informers").text(txt).css({
                top:  20 + Y + "px",
                left: 20 + X + "px"                
            });
            document.onmousemove = null;
        }
        
        init();
        $(".informers").css({
            display: "block"
        });

    }, function() {
        $(".informers").css({
            display: "none",
            top:  0,
            left: 0
        }).text("");
    });
.quote-day {
   height: 150px;
    width: 150px;
    border: 1px solid red;
}
.informers {
    line-height: 22px;
    position: absolute;
    z-index: 30;
    display: none;
    width: 300px;
    padding: 30px;
    text-align: left;
    background: #fff;
    -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, .1);
    box-shadow: 0 0 25px rgba(0, 0, 0, .1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quote-day ifrs-md" data-text="Текст">
asdasdasd
</div>
<div class="informers"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.