make a section visible by hovering over paragraphs - html

Question

I know this question already has some answers, but I can't figure out how to make a section visible when it has the display:none property. I need to make it visible when I mouse over some paragraphs. Here's my code:
.buttons {
width: 97px;
margin: 0;
padding: 0;
font-size: 14px;
color: #fff;
text-align: center;
background-image: url("/res/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
.buttons:hover > .label {
background-color: #fff;
color: #000;
background-image: url("/res/upArrow.png");
cursor: pointer;
visibility: visible;
}
.label {
position: absolute;
width: 100%;
height: 150px;
top: 35px;
background-color: #fff;
border-bottom: solid 3px #3f84f2;
display: none;
}
<section class="header">
<div class="menu left">
<div class="logo left"></div>
<p class="buttons left">REVIEWS</p>
<p class="buttons left">FEATURES</p>
<p class="buttons left">GUIDES</p>
<p class="buttons left">VIDEOS</p>
<p class="buttons left">GALLERIES</p>
<p class="buttons left">FORUMS</p>
<p class="buttons left">EVENTS</p>
<div class="left">
<input type="text" value="Search Products & Articles" />
</div>
<div class="login-icon right"></div>
</div>
</section>
<section class="label"></section>
For example! check out this site please http://www.engadget.com/ and see the behavior of the menu. Thanks

Answer 1

This can not be done with CSS unless you move .label into the same container as your .buttons. CSS has no parent selector to traverse the DOM like javascript does so the element has to be either a sibling or a descendant:
<section class="header">
<div class="menu left">
<div class="logo left"></div>
<p class="buttons left">REVIEWS</p>
<p class="buttons left">FEATURES</p>
<p class="buttons left">GUIDES</p>
<p class="buttons left">VIDEOS</p>
<p class="buttons left">GALLERIES</p>
<p class="buttons left">FORUMS</p>
<p class="buttons left">EVENTS</p>
<div class="left">
<input type="text" value="Search Products & Articles" />
</div>
<div class="login-icon right"></div>
<section class="label">SHOW THE TEXT</section>
</div>
</section>
And also you're using display: none on label but calling visibility:visible on hover. It needs to be another display property other than hidden:
.buttons:hover ~ .label{ //target sibling
background-color: #fff;
color: #000;
background-image: url("/res/upArrow.png");
cursor: pointer;
display:block; //add
}
FIDDLE
If you want to do this with your current HTML structure you can use a .hover() function in jQuery pretty simply:
$(".buttons").hover(function(){
$(".label").toggle();
});
JS EXAMPLE

Answer 2

You should use display:block; instead of visibility as you're hiding by using display:none:
.buttons:hover ~ .label{/*used ~ instead of > to refer nextAll siblings*/
background-color: #fff;
color: #000;
background-image: url("/res/upArrow.png");
cursor: pointer;
display: block;
}
If you have used visibility:hidden in label then only needed to use visibility:visible in .buttons:hover > .label
And you should use html like this:
<section class="header">
<div class="menu left">
<div class="logo left"></div>
<p class="buttons left">REVIEWS</p>
<p class="buttons left">FEATURES</p>
<p class="buttons left">GUIDES</p>
<p class="buttons left">VIDEOS</p>
<p class="buttons left">GALLERIES</p>
<p class="buttons left">FORUMS</p>
<p class="buttons left">EVENTS</p>
<div class="left">
<input type="text" value="Search Products & Articles" />
</div>
<div class="login-icon right"></div>
</div>
<div class="label"></div>
</section>