Question

我有一个问题，现在它吓坏了我好几天了。

我需要一个带有几个较小DIV-Containers的竞争者Div，它们都应该浮动：左边...如果我悬停一个较小的DIV，高度和宽度应该增加，它应该覆盖其他DIV而不用移动他们。

我的代码看起来像这样：

 <div id="boxcontainer">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
 </div>

CSS：

.box{
float:left;
postion: relative;
width:150px;
height:150px;
margin:5px;
background-color: yellow;
}

#boxcontainer{
postion: relative;
width:500px;
height:auto;
}

.box:hover{
z-index:100;
width:300px;
height:auto;
}

任何帮助都非常感谢！

欢呼声，杰

Answer 1

z-index仅适用于定位元素 （位置：绝对，位置：相对或位置：固定）。

而不是浮动，请尝试绝对位置。

我在每个盒子周围添加了一个容器，并将每个元素放在其中。这样，您可以根据需要添加任意数量的框，并保持相同的类。

实施例

<强> HTML

<div id="boxcontainer">
    <div class="box">
        <div class="Inside"></div> 
    </div>         
    <div class="box">
        <div class="Inside"></div> 
    </div>         
    <div class="box">
        <div class="Inside"></div> 
    </div>     
</div>

<强> CSS

#boxcontainer{
    position: relative;
    width:500px;
    height:500px;
}
.box{
    position:relative;
    float:left;
    width:150px;
    height:150px;
    margin:5px;
}
.Inside{    
    background:green;
    position:absolute;
    top:0;
    left:0;
    width:150px;
    height:150px;
    transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.2s ease-in-out;
}
.Inside:hover{
    z-index:100;
    width:250px;
    height:250px;
    background:#666666;
}

http://jsfiddle.net/JJ3v4/3/

Answer 2

现场演示：http://jsfiddle.net/hKL4f/1/

我认为最简单的方法就是使用CSS转换。

.box:hover {
    transform: scale(2, 2);
}

这样就可以在悬停时改变元素的尺寸，而不会影响文档流中的任何其他元素。

如果您希望框以不同的方式展开（即向右和向下而不是向所有方向展开），您可以设置transform-origin属性（默认为50％50％）。

Answer 3

试试这个...有点工作

     .box{
   float:left;
 postion: fixed;
 width:150px;
 height:150px ; 
 margin:5px;
 background-color: yellow;
 }

 #boxcontainer{
 postion: fixed;
 width:500px;
 height:auto;
 }

 .box:hover{
 z-index:1;
 width:260px;
height:160px;
 position:absolute;

 }

Answer 4

当我将鼠标悬停在项目上时，我的项目也遇到了同样的问题，盒子会改变其宽度和高度，但也会影响其他盒子，因此要解决此问题，最好的方法是使用如下的transform属性

.box:hover {
    transform: scale(1.2 , 1.2);  // This increses the dimmensions of the box and overlay 
                                       to others boxes without disturbing others  
}

CSS，z-index DIV'应该在悬停时叠加其他DIV

4 个答案:

实施例