CSS hover元素推开其他div和layout

Question

问题：当悬停在 box1 上时，它应该展开而不影响其他 div 和文档布局，但我当前的代码下推 box2 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;
}

Answer 1

在 relative parent

中使用 position: absolute 和 .box1

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

Answer 2

移除 height:400px 上的 box1:hover 效果。它展开 box1 div 并推送 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>

Answer 3

只需在悬停效果的样式中添加 "margin-bottom: -150px"。

Answer 4

好的，要让box2固定在一个位置，你需要设置position: absolute 并将 box2 的顶部设置为某个值，将左侧设置为某个值。所以，无论如何，box2 都不会改变它的位置。如果 position 是相对的，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。希望这有帮助。

CSS hover元素推开其他div和layout

CSS hover element pushes away other divs and layout

html

css

hover

mousehover