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>

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

现在，当鼠标指针悬停时，我想只增加特定框增加大小（width:200px; height:200px）。我找不到办法去做。

当我在.w1代码中添加课程javascript时，它会应用于所有具有课程event1或event2或event3的元素（无论选哪一个）。所以，当我徘徊在那个类的某个特定的盒子里（被选中）时，所有盒子都会进行过渡，盒子会移动。

我想只有一个盒子可以改变尺寸，而其他盒子则位于原来的位置。此外，必须为特定事件激活此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);

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

2 个答案: