时间戳

首页 > 解决方案 > 扩展具有内容的 div 而不移动其下方的元素

html - 扩展具有内容的 div 而不移动其下方的元素

问题描述

我在页面上有一个元素，当它悬停在上面时，会展开并显示其中一些以前隐藏的文本。问题是当元素展开时，它会将其他内容移到它下面。我尝试使用position:absolute，但没有达到预期的效果。

.col {
  padding: 20px;
}

.col:hover {
  background-color: lightgray;
}

.revealOnHover {
  display: none;
  /*position: absolute;*/
}

#block1:hover .revealOnHover,
#block2:hover .revealOnHover {
  display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

<div class="container">

  <div class="row">
    <div class="col" id="block1">
      <img src="https://picsum.photos/100/100?random=1">
      <p><b>Lorem ipsum dolor sit amet</b></p>
      <i class="fas fa-caret-down" style="color: red;"></i>
      <p class="revealOnHover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <div class="col" id="block2">
      <img src="https://picsum.photos/100/100?random=1">
      <p><b>Excepteur sint occaecat cupidatat non proident</b></p>
      <i class="fas fa-caret-down" style="color: red;"></i>
      <p class="revealOnHover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>

  <p>&nbsp;</p>

  <div style="text-align: center;">
    <a href="https://google.com" target="_blank"><button type="button" class="btn btn-secondary" style="font-weight: bold; margin: 0 auto; margin-right: 2rem; color: #FFF">Click here</button></a>
    <a href="https://agoria.be" target="_blank"><button type="button" class="btn btn-secondary" style="font-weight: bold; margin: 0 auto; margin-right: 2rem; color: #FFF">Click here</button></a>
  </div>

</div>

我的代码：https ://codepen.io/eren5897/pen/GRqgOyd

标签： htmlcssbootstrap-4css-position

解决方案

你其实并不遥远。position:absolute是要走的路，但是您需要一些额外的样式才能使其工作，主要是为了正确定位它并使其共享其父级的背景颜色。

.col {
  padding: 20px;
}

.col:hover {
  background-color: lightgray;
}

.revealOnHover {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  padding: 10px;
  background: inherit;
}

#block1:hover .revealOnHover,
#block2:hover .revealOnHover {
  display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

<div class="container">

  <div class="row">
    <div class="col" id="block1">
      <img src="https://picsum.photos/100/100?random=1">
      <p><b>Lorem ipsum dolor sit amet</b></p>
      <i class="fas fa-caret-down" style="color: red;"></i>
      <p class="revealOnHover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <div class="col" id="block2">
      <img src="https://picsum.photos/100/100?random=1">
      <p><b>Excepteur sint occaecat cupidatat non proident</b></p>
      <i class="fas fa-caret-down" style="color: red;"></i>
      <p class="revealOnHover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>

  <p>&nbsp;</p>

  <div style="text-align: center;">
    <a href="https://google.com" target="_blank"><button type="button" class="btn btn-secondary" style="font-weight: bold; margin: 0 auto; margin-right: 2rem; color: #FFF">Click here</button></a>
    <a href="https://agoria.be" target="_blank"><button type="button" class="btn btn-secondary" style="font-weight: bold; margin: 0 auto; margin-right: 2rem; color: #FFF">Click here</button></a>
  </div>

</div>

推荐阅读