如何让带有 z-index 的 div 在悬停时覆盖另一个 div

Posted 2023-05-08

【中文标题】如何让带有 z-index 的 div 在悬停时覆盖另一个 div

【英文标题】：How to get a div with z-index to overlay another div on hover

【发布时间】：2014-05-12 16:11:04

【问题描述】：

我有一个容器div，里面有几个较小的div:s，它们都带有float:left;。如果我将鼠标悬停在较小的 div:s 之一上，height 和 width 应该会增加，它应该覆盖其他 div:s 而不会移动它们。

html：

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

CSS：

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


#boxcontainer 
  position: relative;
  width:500px;
  height:auto;


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

我怎样才能做到这一点？

【问题讨论】：

float:left 和 :hover 伪类不可能有这个功能。只有通过 position:absolute 才能保留其他框的位置。所以使用 javascript 和 position:absolute 是不可避免的。

【参考方案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/

【讨论】：

这是我的小提琴：jsfiddle.net/caniball/JJ3v4提前谢谢你 - 似乎这个 z-index-property 有点棘手......

试试我上面的更改。我认为这是你想要达到的目标。有帮助别忘了点赞哦。

嘿，谢谢！我认为这是实现的最佳解决方案 - 仅使用 CSS。我的问题是，那个“盒子”-DIV 将被放入页面中，使用 WebYep-Loog - 所以我希望它们都具有相同的类名，因为我不知道其中有多少将来。但我想我会采用您的解决方案并重新考虑循环元素。多谢！编辑：该死的，需要更多的声望才能投票 - 稍后再做！

但是如果我循环这个盒子，假设会有 6 个——我得把它们命名为 box1、box2、box3、box4 等等...？所以我必须根据有多少个框来更改我的样式表......而不是不同的框名，可以使用“子”选择器实现相同的解决方案吗？

刚刚删除了我对此评论的最后一条评论：天哪 :) 就是这样！！太感谢了！一旦我获得 15 名声望，我就会投票……你太棒了！

【参考方案2】：

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

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

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

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

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

【讨论】：

这看起来很像我想要实现的...但是“框”-DIV 将包含不同的内容，因此它们应该根据内容进行扩展...事实并非如此我猜有规模？

【参考方案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;

 

【参考方案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