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

Question

我正在做一个元素，其中有一个包含三个正方形的侧边栏。方 block 将有一个子部分标题，悬停时我想显示一个描述。侧边栏是相对的，因为它的右侧还有另一个 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>