(//b の位置を変更する) 部分が (//リストを表示する) 部分の後に書き込めない場合、何らかのエラーが発生するのはなぜですか?
(.a-1).hover のときに (.b) が移動せず、最後の変更後も同じ場所に留まるようにするにはどうすればよいですか? +0 は機能しませんか?
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;
}