PHP Developers Network
http://forums.devnetwork.net/

How do I make one DIV display, when hovering on another?
http://forums.devnetwork.net/viewtopic.php?f=68&t=141531
Page 1 of 1

Author:  simonmlewis [ Fri Jul 10, 2015 3:51 am ]
Post subject:  How do I make one DIV display, when hovering on another?

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?

Syntax: [ Download ] [ Hide ]
<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>
 

Author:  simonmlewis [ Fri Jul 10, 2015 4:46 am ]
Post subject:  Re: How do I make one DIV display, when hovering on another?

This is another option and I have made this one work.

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?

Author:  Celauran [ Fri Jul 10, 2015 6:34 am ]
Post subject:  Re: How do I make one DIV display, when hovering on another?

.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

Author:  simonmlewis [ Fri Jul 10, 2015 7:34 am ]
Post subject:  Re: How do I make one DIV display, when hovering on another?

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

Page 1 of 1 All times are UTC - 5 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/