javascript - 带有悬停区域的地图在 div 中显示 alt 文本 - 相对于悬停区域

Question

我试图让一个 div 显示悬停区域的替代文本 - 相对于悬停区域定位。

我可以让文本显示，但不是在正确的位置。

这是我的js：

$(document).ready(function() {
if($('#Map')) {
    $('#Map area').each(function() {
    var altText = $(this).attr("alt");
        $(this).mouseover(function() {
    $("#popup").html(altText);
            $('#popup').show();

        });

        $(this).mouseout(function() {
    var altText = $(this).attr("alt");
            $('#popup').hide();
        });

    });
}
});

Answer 1

这将正常工作

<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#popup").draggable();
    if ($('#Map')) {
        $('#Map area').each(function () {
            var altText = $(this).attr("alt");
            $(this).mouseover(function (event) {

                $("#popup").html(altText);
                $("#popup").css({ 'top': event.clientY, 'left': event.clientX });
                $('#popup').show();

            });

            $(this).mouseout(function () {
                var altText = $(this).attr("alt");
                $('#popup').hide();
            });

        });
    }
});

你需要让 div 拖动，然后只有它会动态改变位置