Show div when hovering, hide when not

Question

I basically want to show some extra information below a list of boxes i have, when a box is being hovered over. Each box contains a job, and i need to show a brief job description underneath the row of boxes, when each box is hovered. Here is my HTML so far:

<div class="areaBox">
 <div id="area1" class="expertise">Integrated Designers</div>
 <div id="area2" class="expertise">Integrated Designers</div>
 <div id="area3" class="expertise">Digital Account Managers</div>
 <div id="area4" class="expertise">Front End Developers</div>
 <div id="area5" class="expertise">Integrated Designers</div>   
 <div id="area6" class="expertise">Digital Account Managers</div>
 <div id="area7" class="expertise">Front End Developers</div>
 <div id="area8" class="expertise">Integrated Designers</div>
 <div id="area9" class="expertise">Digital Account Managers</div>

 <div id="expertTitle">Integrated Designers-Perfect for those.....etc</div>

</div>

So, when someone hovers over "area1", i need the div "expertTitle" to appear below all of the boxes. I have attempted the following:

.areabox > #expertTitle{
display:none;
font-family:adelle-sans;
font-size:27px;
color:#ffdc33;
}

.areabox > #area1:hover + #expertTitle{
display:block;
}

To no avail. What am i doing wrong here? Should i be using JQuery instead?

Answer 1

You are using the direct sibling css selector ( + ). This will only show if the siblings are directly next to each other in the DOM.

Instead, use the general sibling css selector ( ~ ). More info on this selector can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

You also have a mismatch between the HTML class name and css selector for "areaBox/areabox".

Here is an example:

 .areaBox > #expertTitle{ display:none; } .areaBox > #area1:hover ~ #expertTitle{ display:block; } 

 <div class="areaBox"> <div id="area1" class="expertise">Integrated Designers</div> <div id="area2" class="expertise">Integrated Designers</div> <div id="area3" class="expertise">Digital Account Managers</div> <div id="area4" class="expertise">Front End Developers</div> <div id="area5" class="expertise">Integrated Designers</div> <div id="area6" class="expertise">Digital Account Managers</div> <div id="area7" class="expertise">Front End Developers</div> <div id="area8" class="expertise">Integrated Designers</div> <div id="area9" class="expertise">Digital Account Managers</div> <div id="expertTitle">Integrated Designers-Perfect for those.....etc</div> </div> 

Answer 2

EDIT: I edited it. I added some JavaScript. Hope this works:

 function changeText(text) { document.getElementById("expertTitle").innerHTML = text; } 

 <div class="areaBox"> <div id="area1" class="expertise" onmouseover="changeText('Integrated Designers - Perfect for those.....etc');">Integrated Designers</div> <div id="area2" class="expertise" onmouseover="changeText('Yet even more integrated Designers');">Integrated Designers</div> <div id="area3" class="expertise" onmouseover="changeText('Digital stuff - Beep Boup');">Digital Account Managers</div> <div id="area4" class="expertise" onmouseover="changeText('Pepole that are at the front');">Front End Developers</div> <div id="area5" class="expertise" onmouseover="changeText('OMG MORE INTERGATED DESIGNERS!!!');">Integrated Designers</div> <div id="area6" class="expertise" onmouseover="changeText('More digital stuff - beppy boopy');">Digital Account Managers</div> <div id="area7" class="expertise" onmouseover="changeText('YET EVEN MORE Pepole that are at the front');">Front End Developers</div> <div id="area8" class="expertise" onmouseover="changeText('AND YET OMG MORE Integrated Designers OMG OMG OMG');">Integrated Designers</div> <div id="area9" class="expertise" onmouseover="changeText('more beep and boopy');">Digital Account Managers</div> <hr> <div id="expertTitle"></div> </div>