如何在相对父 div 中堆叠 div 并在悬停时显示底部 div

Question

我正在做一个项目，其中有一个带有三个正方形的侧边栏。方块会有一个小节标题，当悬停时我想显示一个描述。侧边栏是相对的，因为它的右侧还有另一个 div。到目前为止，这些盒子都相互堆叠，悬停什么也没做，我不知道从这里去哪里。我对 CSS 或 JS 解决方案持开放态度。

.sidebar {
  width: 20%;
  height: 100vh;
  position: relative;
}

.boxes {
  width: 80%;
  height: 25%;
  background-color: #C4D5E4;
  margin: 10%;
  border-radius: 50px;
  position: relative;
  z-index: 1;
}

.boxes a {
  display: block;
  color: white;
  font-size: 20pt;
  font-family: sans-serif;
  text-align: center;
  padding-top: 40%;
  text-decoration: none;
}

.boxesHover {
  width: 80%;
  height: 25%;
  background-color: #6BA5CD;
  margin: 10%;
  border-radius: 50px;
  position: absolute;
  z-index: 0;
}

.boxesHover:hover .boxesHover {
  z-index: 2;
}

.boxesHover a {
  display: block;
  color: white;
  font-size: 20pt;
  font-family: sans-serif;
  text-align: center;
  padding-top: 40%;
  text-decoration: none;
  position: relative;
}

I'm working on a project where there is a sidebar with three squares in it. The squares will have a sub-section title, and when hovering I want to reveal a description. The sidebar is relative because there is another div to the right side of it. So far the boxes are all stacking on each other and hover does nothing, I'm not sure where to go from here. I'm open to CSS or JS solutions.

<!-- begin snippet: js hide: false console: true babel: false -->

<div class="sidebar">

  <div class="boxes">
    <a href="">Audience</a>
  </div>
  <div class="boxesHover">
    <ul>
      <li>Description 1</li>
      <li>Description 2</li>
      <li>Description 3</li>
      <li>Description 4</li>
    </ul>
  </div>

  <div class="boxes">
    <a href="">Methods</a>
  </div>

  <div class="boxesHover">
    <ul>
      <li>Description 1</li>
      <li>Description 2</li>
      <li>Description 3</li>
      <li>Description 4</li>
    </ul>
  </div>

  <div class="boxes">
    <a href="">Industry</a>
  </div>

  <div class="boxesHover">
    <ul>
      <li>Description 1</li>
      <li>Description 2</li>
      <li>Description 3</li>
      <li>Description 4</li>
    </ul>
  </div>
</div>

Answer 1

我相信您的问题是您将悬停功能放在 div 上，而不是实际框上。

试试这个：

<div>
<ul href="">
  <li class="boxesHover">Diversification</li>
  <li class="boxesHover">Musical Chairs</li>
  <li class="boxesHover">Telecome M&A</li>
  <li class="boxesHover">Fake News</li>
</ul>

Answer 2

我在教授的帮助下解决了这个问题，他建议使用弹性盒子。代码如下：

HTML：

<div class="sidebar">

<div class="boxes">
    <a href="audience.html">
        <p>Audience</p>
        <ul class="boxeshover">
          <li>Subscriptions</li>
          <li>Membership</li>
          <li>Global Footprint</li>
        </ul>
    </a>
  </div>

  <div class="boxes">
    <a href="methods.html">
      <p>Methods</p>
      <ul class="boxeshover">
        <li>Profitability</li>
        <li>Data Practices</li>
        <li>Metrics of Success</li>
        <li>E-Commerce</li>
      </ul>
    </a>
  </div>

    <div class="boxes">
      <a href="industry.html">
        <p>Industry</p>
        <ul class="boxeshover">
          <li>Diversification</li>
          <li>Musical Chairs</li>
          <li>Telecom M&A</li>
          <li>Fake News</li>
        </ul>
      </a>
    </div>

  </div>

CSS：

.sidebar {
  width: 20%;
  height: 100vh;
  position: fixed;
}

.boxes {
  width: 200px;
  height: 200px;
  background-color:#CDCDCD;
  margin: 5%;
  margin-left: 10%;
  border-radius: 50px;
  overflow: hidden;
  position: relative;
}

.boxes a {
  color: white;
  text-decoration: none;
  font-size: 20pt;
  font-family: sans-serif;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.boxeshover {
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background-color:#C05746;
  color: white;
  font-size: 15pt;
  list-style-type: none;
  padding-left: 0;
  line-height: 175%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.boxes:hover .boxeshover {
    opacity: 1;
}