情况: 我有3个div |左|中心|右| 我左边有3个其他div,右边有3个其他div。 当我通过这6个div中的任何一个时,它们会增加宽度。 右侧是好的,但是左侧,当它长大时,仍然在中心div后面。
更容易看到: 将鼠标移到左侧菜单上,您仍然可以看到中心div中的文本。这种行为不会发生在右侧。
<div class="wrapper">
<div class="menu_left">
<div class="item_left"> </div>
<div class="item_left"> </div>
<div class="item_left"> </div>
</div>
<div class="central">XXXXXXXX XXXXXXX</div>
<div class="menu_right">
<div class="item_right"> </div>
<div class="item_right"> </div>
<div class="item_right"> </div>
</div>
</div>
<script>
//$("div").fadeIn(3500);
$(".item_left").mouseenter(function() {
$(this).animate({ width: "240px"}, 350);
});
$(".item_left").mouseleave(function() {
$(this).animate({ width: "100px" }, 350);
});
$(".item_right").mouseenter(function() {
$(this).animate({ width: "240px"}, 350);
});
$(".item_right").mouseleave(function() {
$(this).animate({ width: "100px" }, 350)
});
</script>
http://jsfiddle.net/lcssanches/E7B3t/1/
修改
左菜单:我想避免这个
右键菜单:正确!
答案 0 :(得分:3)
根据下面的CSS代码判断,您似乎希望左/右项覆盖中央div
,只有您的错误是拼写错误 - postion:
应为position:
}
div.menu_left,div.menu_right{
postion: relative;
margin:0;
padding:0;
display:inline-block;
width: 100px;
height: 100%;
}