如何在相对父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;
}