CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dom Greenslade BSc
Dom Greenslade BSc

Reputation: 389

Show div when hovering, hide when not

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?

Upvotes: 0

Views: 71

Answers (2)

user3434588
user3434588

Reputation:

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>

Upvotes: 0

Marcelo
Marcelo

Reputation: 4425

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>

Upvotes: 3

Related Questions