Page 1 of 1

How do I make one DIV display, when hovering on another?

Posted: Fri Jul 10, 2015 3:51 am
by simonmlewis
I'm trying to make a little support dropdown appear, and this seems to be the simplest of things.
So when you hover over one DIV, the other DIVs display become 'block'. But it's not working.

What I am doing wrong?

Code: Select all

<style>
.template_contact_info
{
display: none;
background-color: #ffffff;
width: 250px;
border: 1px solid #000000;
z-index: 170;
position: absolute;
left: 698px;
top: 54px;
padding: 7px;
line-height: 25px;
}

.template_contact:hover .template_contact_info
{
display: block;
}
</style>

<span class='template_contact'>&#9660;</span>
<div class='template_contact_info'>ads fas dfas fd<br/>adfadfasfd</div>

Re: How do I make one DIV display, when hovering on another?

Posted: Fri Jul 10, 2015 4:46 am
by simonmlewis
This is another option and I have made this one work.
http://stackoverflow.com/questions/1917 ... out-jquery
The only issue with it, is user friendliness.

If you click the link to dropdown the DIV (checking the hidden box), you cannot just click away.

So can it be altered to "lose focus"... and then the DIV hides again?

Re: How do I make one DIV display, when hovering on another?

Posted: Fri Jul 10, 2015 6:34 am
by Celauran
.template_contact_info is not a child of .template_contact, but your CSS is treating it as though it were. Are you trying to do something like this?
http://codepen.io/anon/pen/OVZzbb

Re: How do I make one DIV display, when hovering on another?

Posted: Fri Jul 10, 2015 7:34 am
by simonmlewis
I've made it work with a click, but how do I make it disapear by clicking away.
For now, I've added the same button to mke it appear, in the box that then makes it go. But be nice if a "click" away would do it...