悬停时增加尺寸而不改变其他元素的位置 [英] Increasing dimensions on hover without changing the position of other elements

问题描述

假设我的 10 div 形式为格子。让我们把它称为 home 页面。
在这10个中，
3个div 有class .event1
5 divs 有class .event2
2 divs 有类 .event3

 < div class =boxes event1 > 
 .... // 3次
 .... 
< / div> 
< div class =boxes event2> 
 .... // 5次
 .... 
< / div> 
< div class =boxes event3> 
 .... // 2次
 .... 
< / div> 
  

这些方块放在一起。

当我点击 event1 时，除了那些拥有类 event1 的盒子外，所有盒子都会淡出。同样，对于所有类。点击首页，所有框都会再次淡入。

 < div id =navi> 
< a href =＃>< div id =t0>< span>主页< / 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（ '''）; 
 $（'。boxes'）。not（'。'+ c）.animate（{
 opacity：0.0 
}，500）; 
} 
}）; 
}）; 
< / script> 
  

CSS的类：

  .boxes，.event1，.event2，.event3 {
 background：rgba（0，0，0，.30）; 
 float：left; 
职位：亲属; 
 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; 
位置：绝对; 
 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 ）。我找不到办法做到这一点。

当我在 javascript 中添加class .w1 c>代码，它被应用于所有具有类 event1 或 event2 或 event3 （无论选择哪一个）。所以，当我徘徊到某个特定的课堂（已选中）时，所有的框都会进行过渡，并且框会发生变化。

我只想要一个盒子来改变尺寸，而其他盒子都在原来的位置。
另外，这个悬停事件必须为特定事件激活，以便不能 hover 在选择 home 时显示在元素上。我甚至尝试通过更改 z-index 来做到这一点，但是页面变得相当混乱。 解决方案

我觉得可以自由地重建你的项目。在这个例子中，我使用javascript来代替css。这个例子的要点是，我不调整现有的框。我建立一个新的div，复制旧的div的内容，将其绝对定位，并将旧的不透明度设置为0. jsfiddle link： http://jsfiddle.net/56yeQ/8/

html：

 < div id =navi> 
< a href =＃>< div id =t0>< span>主页< / 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; 
职位：亲属; 
 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; 
位置：绝对; 
 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 
 $ b} else $ {
 $（'。boxes'）。not（'。'+ c）.animate（{
 opacity：0.0 
} ，500）; 
 $（'。'+ c）.animate（{
 opacity：1.0 
}，500）
} 
}）; 
}）; 
 
函数hoverIn（元素）{
 
 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）; 
 
 
 
函数hoverOut（元素）{
 
 var oldDiv = $（this）.data（oldDiv）; 
 $（oldDiv）.css（{opacity：1}）; 
 
 $（this）.remove（）; 
} 
 
 $（。boxes）。mouseenter（hoverIn）; 
  

Suppose I've 10 divs in the form of squares. Lets call it the home page. Out of these 10, 3 divs have class .event1 5 divs have class .event2 2 divs have class .event3

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

The boxes are placed next to one another.

When I click event1, all box fadeout except those having the class event1. Similarly, for all classes. On clicking home, all boxes will again fade in.

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

My JQuery code for 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 for the classes:

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

Now I want to make only a particular box increase in size (width:200px; height:200px), when the mouse pointer is hovered. I can't find a way to do it.

When I'm adding the class .w1 in javascript code, it is being applied to all the elements having class event1 or event2 or event3 (whichever one was selected). So, when I'm hovering to a particular box of that class (which was selected), all the boxes undergo transition and the boxes shift.

I want only one box to change dimensions while the other boxes are at their original place. Also, this hovering event has to be activated for a particular event so that one can't hover on elements when home is selected. I even tried doing this by changing z-index but the page got pretty messed up.

解决方案

I felt free to rebuild your project. Instead of css i use javascript in this example. The main point of this example is, that i do not resize the existing box. I build a new div, copy the content of the old div, position it absolute and set the opacity of the old one to 0. jsfiddle link: 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);

这篇关于悬停时增加尺寸而不改变其他元素的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！