How can I make position().left + 0 work?
<ol>
<li><p>Why if (//change b position) part write after (//show a list) part can't work, have some error?</p></li>
<li><p>How can I make it so that when (.a-1).hover, (.b) not move and still in the same place after last change?
+0 can't work?</p></li>
</ol>

<p><a href="http://jsfiddle.net/sL8mK/" rel="nofollow">http://jsfiddle.net/sL8mK/</a></p>

<p>jquery</p>

<pre><code>    //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();
});
</code></pre>

<p>html,css</p>

<pre><code>&lt;div class="a"&gt;a&lt;/div&gt;
&lt;div class="a-1"&gt;a-1&lt;/div&gt;
&lt;div class="a-2"&gt;a-2&lt;/div&gt;
&lt;div class="b"&gt;b&lt;/div&gt;

.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;
}
</code></pre>
