html - 仅使用 CSS/HTML 将鼠标悬停在按钮上时显示 div

Question

这是我的代码:

a) 我在顶部有一排按钮，水平格式如下:

HTML:

<ul class="nav"> 
<a href="#jobs"class="button1">Work</a>
<a href="#volunteer" class="button2"> Volunteer</a>
<a href="#education" class="button3"> Education</a>
<a href="#skills" class="button4"> Skills</a> 
<a href="#references" class="button5"> References</a>
<a href="#images" class="button6"> Images</a> 
</ul>

b) 我有 div block ，每个 block 显示一个段落:

<div class="jobs"> 
<h2>text</h2> 
<h3>text</h3> 
<h4>text</h4> 
</div>

c) 我希望 CSS 不显示作业 div:

.jobs {
   display: none;
}

d) 现在我将鼠标悬停在第一个按钮上，我希望显示作业 div:

.button1:hover+.jobs {
display: block
    }

e) 重复所有其他 div 部分

.volunteer {
       display: none;
    }

    .button2:hover+.volunteer {
        display:block

    }

Answer 1

您需要以不同方式标记 HTML。

.jobs, .volunteer {
   display: none;
}
.button1:hover+.jobs, .button2:hover+.volunteer {
   display: block;
   /* position the divs under the navigation links */
   position: absolute;
   top: 120px;
}

<ul class="nav"> 
  <li>
    <a href="#jobs"class="button1">Work</a>
    <div class="jobs"> 
      <h2>h2 jobs</h2> 
      <h3>h3 jobs</h3> 
      <h4>h4 jobs</h4> 
    </div>
  </li>
  <li>
    <a href="#volunteer" class="button2"> Volunteer</a>
    <div class="volunteer"> 
      <h2>h2 volunteer</h2> 
      <h3>h3 volunteer</h3> 
      <h4>h4 volunteer</h4> 
    </div>
  </li>
  <li><a href="#education" class="button3"> Education</a></li>
  <li><a href="#skills" class="button4"> Skills</a></li>
  <li><a href="#references" class="button5"> References</a></li>
  <li><a href="#images" class="button6"> Images</a></li>
</ul>