javascript - 增加悬停尺寸而不改变其他元素的位置

Question

假设我有 10 个 div，采用方 block 的形式。我们将其称为主页页面。 在这10个中， 3 div 具有类 .event1 5 div 具有类 .event2 2 div 具有类 .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>

我的 fadeOut 的 JQuery 代码:

<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;
    }

现在，当鼠标指针悬停时，我只想增加特定框的尺寸(宽度:200px；高度:200px)。我找不到办法做到这一点。

当我在 javascript 代码中添加类 .w1 时，它将应用于具有类 event1 或 event2 或 event3(以选择的为准)。因此，当我将鼠标悬停到该类的特定框(已选择的框)时，所有框都会发生过渡并且框会移动。

我只想改变一个盒子的尺寸，而其他盒子都在原来的位置。 此外，必须针对特定事件激活此hovering 事件，以便在选择home 时无法在元素上hover。我什至尝试通过更改 z-index 来做到这一点，但页面变得非常困惑。

Answer 1

我可以随意重建您的元素。在这个例子中我使用 javascript 而不是 css。这个例子的要点是，我不调整现有框的大小。我构建一个新的 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);