Display div when hovering over button using CSS/HTML only

Question

Here is my code:

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

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:

<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:

.jobs {
   display: none;
}

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

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

e) Repeat for all other div sections

.volunteer {
       display: none;
    }

    .button2:hover+.volunteer {
        display:block

    }

Answer 1

You will need to markup HTML differently.

.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>

Answer 2

This is impossible, as described, with your current HTML, with only HTML and CSS (though only perhaps until the reference and :matches() pseudo-selectors arrive). However, if, rather than :hover you'd be willing to work with clicks on the list-elements, it can be done (without JavaScript). Given the corrected HTML:

<ul class="nav">
    <li><a href="#jobs" class="button1">Work</a>
    </li>
    <li><a href="#volunteer" class="button2"> Volunteer</a>
    </li>
    <!-- and so on... -->
</ul>
<div id="details">
    <div id="jobs"></div>
    <div id="volunteer"></div>
    <!-- and so on... -->
</div>

The following CSS will show the relevant div element once the <a> element has been clicked on (note that the use of an id is essential for this to work):

#details > div {
    /* to hide the eleemnt(s) initially: */
    display: none;
}

#details > div:target {
    /* to show the relevant element once the relevant link is clicked: */
    display: block;
}

#details > div[id]::after {
  content: attr(id);
}
#details > div {
  display: none;
}
#details > div:target {
  display: block;
}

<ul class="nav">
  <li><a href="#jobs" class="button1">Work</a>
  </li>
  <li><a href="#volunteer" class="button2"> Volunteer</a>
  </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>
<div id="details">
  <div id="jobs"></div>
  <div id="volunteer"></div>
  <div id="education"></div>
  <div id="skills"></div>
  <div id="references"></div>
  <div id="images"></div>
</div>

With plain JavaScript, on the other hand, it can be achieved with:

// the 'e' argument is automatically to the function by addEventListener():
function toggleRelevant (e) {
    // caching the 'this' element:
    var self = this,
    // finding the div element with a class equal to the href of the 'a' element
    // (though we're stripping off the leading '#':
        relevantElement = document.querySelector('div.' + self.getAttribute('href').substring(1) );
    // if the event we're responding to is 'mouseover' we set the display of the
    // found div to 'block', otherwise we set it to 'none':
    relevantElement.style.display = e.type === 'mouseover' ? 'block' : 'none';
}

// finding all the a elements that are in li elements:
var links = document.querySelectorAll('li a');

// iterating over those a elements, using Array.prototype.forEach:
[].forEach.call(links, function(linkElem){
    // adding the same event-handler for both mouseover and mouseout:
    linkElem.addEventListener('mouseover', toggleRelevant);
    linkElem.addEventListener('mouseout', toggleRelevant);
});

function toggleRelevant(e) {
  var self = this,
    relevantElement = document.querySelector('div.' + self.getAttribute('href').substring(1));

  relevantElement.style.display = e.type === 'mouseover' ? 'block' : 'none';
}

var links = document.querySelectorAll('li a');

[].forEach.call(links, function(linkElem) {
  linkElem.addEventListener('mouseover', toggleRelevant);
  linkElem.addEventListener('mouseout', toggleRelevant);
});

div[class] {
  display: none;
}
div[class]::before {
  content: attr(class);
  color: #f00;
  border: 1px solid #f00;
  padding: 0.2em;
}

<ul class="nav">
  <li><a href="#jobs" class="button1">Work</a>
  </li>
  <li><a href="#volunteer" class="button2"> Volunteer</a>
  </li>
  <!-- and so on... -->
</ul>
<div class="jobs">
  <h2>text</h2>
  <h3>text</h3>
  <h4>text</h4>
</div>
<div class="volunteer">
  <h2>text</h2>
  <h3>text</h3>
  <h4>text</h4>
</div>
<!-- and so on... -->

Answer 3

It sounds like you're trying to do some kind of a tab menu where pressing a specific button shows a different content. Here's a SO page that describes how it's done: How to make UL Tabs with only HTML CSS

Answer 4

I don't think this is do able in css since display blocks (job, volonteer, ...) and button are not parent. But in jQuery this is fairly simple :

$('.buttonX').hover(
    function() {
        // Styles to show the box
        $('.boxX').css(...);
    },
    function () {
        // Styles to hide the box
        $('.boxX').css(...);
        }
);