带有悬停区域的地图在 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 拖动，然后它才会动态改变位置