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

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4434
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4434
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6425
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post 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
simonmlewis
DevNet Master
Posts: 4434
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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...
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply