悬停区域地图显示div中的替代文本-相对于悬停区域

Question

我正在尝试使div与悬停区域的alt文本一起显示-相对于悬停区域定位。

我可以显示文字，但位置不正确。

这是我的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 draggabele，然后只有它才能动态改变位置