CSS悬停元素推开其他div和布局

问题描述：

问题：将鼠标悬停在box1上时，它应该展开而不会影响其他div和文档布局，但是我当前的代码会按下box2 div。CSS悬停元素推开其他div和布局

我希望box1在box2上花钱而不影响它的位置。

请任何帮助！

<div class = "box1"> 
    <p>first box</p> 
    <ul style="list-style-type:none"> 
     <li>item 1</li> 
     <li>item 2</li> 
     <li>item 3</li> 
     <li>item 4</li> 
    </ul> 
</div> 
<div class="box2"> 
    <p>2nd box</p> 
</div>

CSS

.box1{ 
    height: 250px; 
    width: 300px; 
    background-color: #eee; 
    border-radius: 3px; 
    border: 1px solid darkgray; 
    position: relative; 
} 

.box1:hover{ 
    height: 400px; 
    background-color: white; 
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 
    position: relative; 
    z-index: 1; 
} 

.box2{ 
    height: 150px; 
    width: 400px; 
    background-color: #eee; 
    border-radius: 3px; 
    border: 1px solid darkgray; 
    position: relative; 
}

答

使用position: absolute与.box1在relative父

.wrap { 
 
    position: relative; 
 
    height: 250px; 
 
    width: 300px; 
 
} 
 
.box1 { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: #eee; 
 
    border-radius: 3px; 
 
    border: 1px solid darkgray; 
 
    position: relative; 
 
} 
 

 
.box1:hover { 
 
    height: 400px; 
 
    background-color: white; 
 
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
.box2 { 
 
    height: 150px; 
 
    width: 400px; 
 
    background-color: #eee; 
 
    border-radius: 3px; 
 
    border: 1px solid darkgray; 
 
    position: relative; 
 
}

<div class="wrap"> 
 
    <div class="box1"> 
 
    <p>first box</p> 
 
    <ul style="list-style-type:none"> 
 
     <li>item 1</li> 
 
     <li>item 2</li> 
 
     <li>item 3</li> 
 
     <li>item 4</li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
<div class="box2"> 
 
    <p>2nd box</p> 
 
</div>

答

删除height:400px关于box1:hover的影响。它扩大box1股利并推动box2。

.box1{ 
 
     height: 250px; 
 
     width: 300px; 
 
     background-color: #eee; 
 
     border-radius: 3px; 
 
     border: 1px solid darkgray; 
 
     position: relative; 
 
     
 
     
 
    } 
 
    
 
    .box1:hover{  
 
    
 
     background-color: white; 
 
     box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 
 
     position: relative; 
 
     z-index: 1; 
 
     
 
    } 
 
    
 
    .box2{ 
 
     height: 150px; 
 
     width: 400px; 
 
     background-color: #eee; 
 
     border-radius: 3px; 
 
     border: 1px solid darkgray; 
 
     position: relative; 
 
    }

<div class = "box1"> 
 
     <p>first box</p> 
 
     <ul style="list-style-type:none"> 
 
      <li>item 1</li> 
 
      <li>item 2</li> 
 
      <li>item 3</li> 
 
      <li>item 4</li> 
 
     </ul> 
 
    </div> 
 
    <div class="box2"> 
 
     <p>2nd box</p> 
 
    </div>

但他希望这个div在悬停时扩大，所以你的回答是无益的 – Joint

答

只需添加 “边距：-150px” 到样式悬停效果。

答

好吧，为了让box2固定在某个位置，您需要设置位置：绝对并将box2的顶部设置为某个值并保留为某个值。所以，无论如何，box2不会改变它的位置。如果位置是相对的，box2的位置会有所不同，并且取决于页面的其他元素（在这种情况下是box1）。做以下更改：

.box2{ 
    height: 150px; 
    width: 400px; 
    top: 300px; 
    left: 0px; 
    background-color: #eee; 
    border-radius: 3px; 
    border: 1px solid darkgray; 
    position: absolute; 
}

根据您的要求设置顶部和左侧。上面改变的CSS，不会移动box2。希望这有助于。

抱歉的信息不足。是的，它希望box1重叠box2。 – 4ukh

CSS悬停元素推开其他div和布局

相关推荐