javascript - 如何在鼠标悬停时使 div 出现在图像上的特定区域标签上？

Question

我有一些 javascript 可以连续向左移动图像。当您将鼠标悬停在图像上时，我希望停止滚动，并且我希望带有一些自定义文本的稍微透明的 div 显示在您鼠标悬停的任何区域标记上。

这是我正在使用的 JS，我注释掉了应该发生的地方。我该怎么做？

$(document).ready(function() {
                var date = new Date();
                var style = "day"
                if (date.getHours() >= 17 && date.getHours() <=5) {
                    style="night";
                }
                setInterval(wells_fancy_slider, 50);
                $('area').hover(function() {
                                    // here is where the code should go
                    paused = true;
                }, function() {
                                    // here is where you hide the div
                    paused = false;
                })
            })

            function wells_fancy_slider() {
                if (!paused) {
                    if (parseInt($('#pic1').css('left')) < -2770) {
                        $('#pic1').css('left', '5586');
                    }
                    if (parseInt($('#pic2').css('left')) < -2770) {
                        $('#pic2').css('left', '5586');
                    }
                    if (parseInt($('#pic3').css('left')) < -2770) {
                        $('#pic3').css('left', '5586');
                    }
                    $('#pic1, #pic2, #pic3').css('left', '-=5');
                }
            }

Answer 1

不确定它是否符合您的需求:

CSS:

#mydiv{position:absolute;display:none}

    $('area').hover(function() {                

   $('mydiv').offset({ top: $(this).offset().top, left: $(this).offset().left}).fadeIn();
                paused = true;
            }, function() {
                   $('#mydiv').hide();
                paused = false;
            })