0

状況：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/

編集：

左メニュー：これは避けたい
left_menu

右メニュー：正解です！
roght_menu

4

1 に答える 1

3

以下のCSSコードから判断すると、左/右のアイテムで中央をカバーしたいようです.divあなたの間違いはスペルミスだけですpostion:.position:

div.menu_left,div.menu_right{
  postion: relative;
  margin:0;
  padding:0;
  display:inline-block;
  width: 100px;
  height: 100%;
}

http://jsfiddle.net/E7B3t/3/を参照してください

于 2013-03-19T03:22:11.953 に答える