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

Here is my code:

这是我的代码:

a) I have a row of buttons at the top formatted horizontally as such:

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) I have div blocks each displaying a paragraph:

b)我有div块,每个块显示一个段落:

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

c) I want the CSS to not display the jobs div yet:

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

.jobs {
   display: none;
}

d) Now that I hover over the first button I want the jobs div to display:

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

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

e) Repeat for all other div sections

e)对所有其他div部分重复

.volunteer {
       display: none;
    }

    .button2:hover+.volunteer {
        display:block

    }

4 个解决方案

#1

You will need to markup HTML differently.

您需要以不同方式标记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>

4 个解决方案

#1

更多相关文章

随机推荐