javascript - ホバー時に他の要素の位置を変更せずに寸法を大きくする

Question

10 divsの形をしているとしますsquares。homeそれをページと呼びましょう。これらの10のうち、 3 divsクラス.event1 5 divsを持っているクラスを持っているクラス.event2 2 divsを持っている.event3

<div class="boxes event1">
   ....//3-times
   ....                
</div>
<div class="boxes event2">
   ....//5-times
   ....                
</div>
<div class="boxes event3">
   ....//2-times
   ....                
</div>

ボックスは隣同士に配置されます。

をクリックevent1すると、クラスを除くすべてのボックスがフェードアウトしますevent1。同様に、すべてのクラスについて。をクリックするhomeと、すべてのボックスが再びフェードインします。

<div id="navi">
    <a href="#"><div id="t0"><span>Home</span></div></a>
    <a href="#"><span>Event1</span></a>
    <a href="#"><span>Event2</span></a>
    <a href="#"><span>Event3</span></a>
</div>

私のJQueryコードfadeOut：

<script type="text/javascript">
    $(function () {
        $('#t0').click(function() {
            $("*").animate({ 
                opacity: 1.0
                }, 500 );
        });
        $("#navi a").click(function() {
            c = $(this).text().toLowerCase();
            if (c!="home"){
                $('.' + c).animate({ 
                   opacity: 1.0
                 }, 500 ).addClass('w1');
                $('.boxes').not('.' + c).animate({ 
                   opacity: 0.0
                 }, 500 );
            }
        });
    });
</script>

クラスの CSS :

.boxes, .event1, .event2, .event3 {
    background:rgba(0, 0, 0, .30);
    float:left;
    position:relative;
    overflow:hidden;
    width:100px;
    height:100px;
    margin:2px;
    box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
    -moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
    -webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
}


   .w1:hover{
        background:rgba(0, 0, 0, .30);
        float:left;
        width:200px;
        height:200px;
        position:absolute;
        overflow:hidden;
        box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
        -moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
        -webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
    }

ここで、マウス ポインターがホバーされたときに、特定のボックスのみのサイズを大きくしたいと考えています ( )。width:200px; height:200px私はそれを行う方法を見つけることができません。

コードにクラス.w1を追加すると、クラスまたはまたは（選択された方）を持つすべての要素に適用されます。そのため、そのクラス (選択された) の特定のボックスにカーソルを合わせると、すべてのボックスが遷移し、ボックスがシフトします。javascriptevent1event2event3

他のボックスは元の場所に置いたまま、1 つのボックスだけの寸法を変更したい。また、このhoveringイベントは特定のイベントに対してアクティブにする必要があるため、が選択されhoverているときに要素を操作できませんhome。変更してこれを試してみましz-indexたが、ページがかなりめちゃくちゃになりました。

Answer 1

多分これはあなたが探しているものです：

        .w1:hover{
            <!--Removed the position absolute-->
            background:rgba(0, 0, 0, .30);
            float:left;
            width:200px;
            height:200px;
            overflow:hidden;
            box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
            -moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
            -webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
            margin-bottom: -100px;
        }
        .w1:hover +div{
            margin-left: -100px;
        }

Answer 2

あなたのプロジェクトを自由に再構築できました。この例では、CSS の代わりに JavaScript を使用しています。この例の要点は、既存のボックスのサイズを変更しないことです。新しい div を作成し、古い div のコンテンツをコピーし、絶対位置に配置して、古い div の不透明度を 0 に設定します。jsfiddle リンク: http://jsfiddle.net/56yeQ/8/

html:

     <div id="navi">
        <a href="#"><div id="t0"><span>Home</span></div></a>
        <a href="#"><span>Event1</span></a>
        <a href="#"><span>Event2</span></a>
        <a href="#"><span>Event3</span></a>
    </div>
    <div class="boxes event1">
        1
    </div>
    <div class="boxes event1">
        2
    </div>
    <div class="boxes event1">
        3
    </div>
    <div class="boxes event2">
        4
    </div>
    <div class="boxes event2">
        5
    </div>
    <div class="boxes event2">
        6
    </div>
    <div class="boxes event2">
        7
    </div>
    <div class="boxes event2">
        8
    </div>
    <div class="boxes event3">
        9
    </div>
    <div class="boxes event3">
        10
    </div>

CSS:

        .boxes, .event1, .event2, .event3 {
            background:rgba(0, 0, 0, .30);
            float:left;
            position:relative;
            overflow:hidden;
            width:100px;
            height:100px;
            margin:2px;
            box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
            -moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
            -webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
        }

        .w1{
            background:rgba(0, 0, 0, .30);
            float:left;
            width:100px;
            height:100px;
            position:absolute;
            overflow:hidden;
            margin: 2px;
            box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
            -moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
            -webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
            opacity: 1;
        }

JavaScript:

       var isHome = true;

        $(function () {

            $("#navi a").click(function() {
                c = $(this).text().toLowerCase();
                isHome = c=="home";
                if (isHome){
                    $("*").animate({ 
                        opacity: 1.0
                    }, 500 );
                } else {
                    $('.boxes').not('.' + c).animate({ 
                        opacity: 0.0
                    }, 500 );
                    $('.' + c).animate({ 
                        opacity: 1.0
                    }, 500 )
                }
            });
        });

        function hoverIn(element){

            if(!isHome && $(this).css("opacity")==1){
                $(".w1").each(function(i){
                    var oldDiv= $(this).data("oldDiv");
                    $(oldDiv).css({opacity:1});
                    $(this).remove(); 
                });
                var posX = $(this).position().left+2;
                var posY = $(this).position().top+2;
                var newDiv = $("<div>").html($(this).html());
                $(newDiv).mouseleave(hoverOut);
                $(newDiv).addClass("w1");
                $("body").append(newDiv);
                $(this).css({opacity: 0});
                $(newDiv).offset({top:posY, left: posX});
                $(newDiv).data("oldDiv",this);
                $(newDiv).animate({height:"200px",width:"200px"},500);
            }
        }

        function hoverOut(element){

             var oldDiv= $(this).data("oldDiv");
             $(oldDiv).css({opacity:1});

             $(this).remove();
        }

        $(".boxes").mouseenter(hoverIn);