将变量传递给.css以设置顶部和左侧位置

时间:2014-01-03 05:18:41

标签: javascript jquery css

我知道还有其他问题,但没有一个解决方案似乎对我有用。我无法获得“顶部”和“左”位置来读取上面定义的变量(YOff,XOff)。它总是默认为0,0。任何帮助,将不胜感激。对于它的价值,我知道变量正在计算正确,因为我提醒他们验证。

$(document).ready(function(){    
    $('.marker').mouseover(function(e){
        var location = $(this).attr("id");
        var offset_t = $(this).offset().top - $(window).scrollTop();
        var offset_l = $(this).offset().left - $(window).scrollLeft();

        var XOff = Math.round( (e.pageX - offset_l) );
        var YOff = Math.round( (e.pageY - offset_t) );

        $('.city').hide();
        $("#" + location + "-market")
        .show()
        .css({
            top: YOff, 
            left: XOff
        });

    });                
    $('.city').mouseleave(function(){
        $('.city').hide();
    }); 
});

关于我正在尝试做什么的一个小细节...在地图上(bg图像)当你鼠标移动一个具有绝对位置的城市(.marker)时,我有一个div(#+ location + -market)显示包含该城市的一些信息。我想让那个div靠近这座城市。

2 个答案:

答案 0 :(得分:3)

$("#selector").css({"top":YOff+ "px","left":XOff+ "px","position": "absolute" });

使用修改过的小提琴看看: - http://jsfiddle.net/md4cD/

答案 1 :(得分:0)

查看-This Link-我将您的.css()功能更改为:

$("#" + location + "-market").show().offset({
    top: YOff, left: XOff
});

这使得你的jquery文件看起来像这样:

$(document).ready(function(){ 
    $('.marker').mouseover(function (e) {
        var location = $(this).attr("id");
        var offset_t = $(this).offset().top - $(window).scrollTop();
        var offset_l = $(this).offset().left - $(window).scrollLeft();

        var XOff = Math.round((e.pageX - offset_l));
        var YOff = Math.round((e.pageY - offset_t));

        $('.city').hide();
        $("#" + location + "-market").show().offset({
            top: YOff, left: XOff
        });
    });

    $('.city').mouseleave(function () {
        $('.city').hide();
    });
});

小提琴-Here-。希望这能产生你想要的结果!