让div在悬停时移动其他div

I want my "appear"-div to appear when my "box"-div is hover. the other "box"-divs should stay where they are, unless the divs under. So if i hover one of the 4 "box"-divs in the top, the 8 other divs should move down, so there is space for the red bow.

当我的“盒子”-div悬停时,我希望我的“出现”-div出现。另一个“盒子”-divs应该留在原地,除非div。因此,如果我将4个“盒子”中的一个徘徊在顶部,那么其他8个div应该向下移动,因此红色蝴蝶结有空间。

HTML

<body>

<div class="beholder">
    <div class="beholder_lille">
            <div class="box"></div>
            <div class="appear"></div>
    </div>

    <div class="beholder_lille">
            <div class="box"></div>
            <div class="appear"></div>
    </div>

    <div class="beholder_lille">
            <div class="box"></div>
            <div class="appear"></div>
    </div>

    <div class="beholder_lille">
            <div class="box"></div>
            <div class="appear"></div>
    </div>
</div>

<div class="beholder">
    <div class="beholder_lille">
            <div class="box"></div>
            <div class="appear"></div>
    </div>

    <div class="beholder_lille">
            <div class="box"></div>
            <div class="appear"></div>
    </div>

    <div class="beholder_lille">
            <div class="box"></div>
            <div class="appear"></div>
    </div>

    <div class="beholder_lille">
            <div class="box"></div>
            <div class="appear"></div>
    </div>
</div>


</body>

CSS

.beholder {
width: 50%;
display:table;
margin: 0 auto;
}

.beholder_lille {
background-color: green;
float: left;
margin:0 4%;
margin-bottom: 30%;
}


.box , .appear{
 background: blue;
 height: 100px;
 width: 100px; 
 float:left;
}


.appear{
background:red;
float: left;
display: none;
clear: both;
height: 600px;
width: 600px;
}
.box:hover{
 background: #e6e6e6;

}

 .box:hover + .appear {
 display:block;  
}

Really hope some mastermind can help me

真的希望一些策划者可以帮助我

1 个解决方案

#1

Ok, I made a fiddle using javascript (jQuery). Everytime you hover on .box element, it counts height difference between .beholder and .appear and set this difference as margin-bottom to .beholder. If height difference is less than zero, it returns from a function. You can adjust your bottom margin in var adjust I set it to 20...

好吧,我用javascript(jQuery)制作了一个小提琴。每次将鼠标悬停在.box元素上时,它会计算.beholder和.appear之间的高度差,并将此差异设置为.beholder的margin-bottom。如果高度差小于零,则从函数返回。您可以在var adjust中调整底部边距我将其设置为20 ...

https://jsfiddle.net/zdmtp7rs/5/

#1

https://jsfiddle.net/zdmtp7rs/5/

秒客网

让div在悬停时移动其他div

1 个解决方案

#1

#1

相关文章