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

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

Answer 2

删除height:400px效果上的box1:hover。它展开box1 div并推送box2。

＆＃13;

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

＆＃13;

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

＆＃13;

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悬停元素推送其他div和布局

4 个答案: