我怎样才能使位置()。左+ 0工作?

时间:2012-08-30 16:29:04

标签: jquery

  1. 为什么如果(//更改b位置)部分写入后(//显示列表)部分无法正常工作,有什么错误?

  2. 如何在(.a-1).hover,(。b)移动并且在最后一次更改后仍然在同一个地方时这样做? +0不起作用?

  3. http://jsfiddle.net/sL8mK/

    jquery的

        //change b position
    $(".a").hover(function(){
        var newleft = $(".b").position().left + 200;
        $(".b").css('left', newleft + 'px');
    },function(){
        var newleft = $(".b").position().left - 200;
        $(".b").css('left', newleft + 'px');
    });
    $(".a-1").hover(function(){
        var newleft = $(".b").position().left + 0;
        $(".b").css('left', newleft + 'px');
    },function(){
        var newleft = $(".b").position().left + 0;
        $(".b").css('left', newleft + 'px');
    });
    
    //show a list
    $(".a").hover(function(){
        $(".a-1, .a-2").show();
    },function(){
        $(".a-1, .a-2").hide();
    });
    $(".a-1").hover(function(){
        $(".a-1, .a-2").show();
    },function(){
        $(".a-1, .a-2").hide();
    });
    $(".a-2").hover(function(){
        $(".a-1, .a-2").show();
    },function(){
        $(".a-1, .a-2").hide();
    });
    

    HTML,CSS

    <div class="a">a</div>
    <div class="a-1">a-1</div>
    <div class="a-2">a-2</div>
    <div class="b">b</div>
    
    .a{
    position: absolute;
    left: 100px;
    top: 150px;
    width: 105px;
    background: red;
    }
    .a-1{
    position: absolute;
    left: 200px;
    top: 150px;
    width: 100px;
    background: maroon;
    display: none;
    }
    .a-2{
    position: absolute;
    left: 300px;
    top: 150px;
    width: 100px;
    background: olive;
    display: none;
    }
    .b{
    position: absolute;
    left: 200px;
    top: 150px;
    width: 100px;
    background: blue;
    }
    

1 个答案:

答案 0 :(得分:1)

我稍微修改了你的代码 - http://jsfiddle.net/ga5Um/1/ (添加了一个容器div)

这是一个适合你的解决方案吗?

相关问题