...

View Full Version : How do I display a div on hover of <p>?



mOrloff
11-26-2009, 01:15 AM
I want to display a specific div based on hovering over an element with a specific class.
Currently, the two elements are unrelated (they are not parents, children, or siblings of each other).

Here are some BASIC examples of the premise:
HTML
<p class="authBob">Bob says "Hi"</p>
<p>
<span class="authHarry">Harry says "How you doin'?"</span>
<span class="authJoe">Joe says "Leave me alone".</span>
</p>
<p class="authSally">Sally says "Pleased to meet you"</p>

<div class="about" id="bob">
<p>Bob is a simple guy</p>
<div><div class="about" id="harry">
<p>Harry likes to be in the midst of whatever's going on</p>
<div><div class="about" id="joe">
<p>Joe is a hermit</p>
<div><div class="about" id="sally">
<p>Sally is always pleasant and enjoyable company</p>
<div>
CSS
div.about{
display:none;
width:25em;
position:fixed;
bottom:0;
right:5em;

}
.authBob:hover{
??? display div#bob ???
}
.authHarry:hover{
??? display div#harry ???
}
.authJoe:hover{
??? display div#joe ???
}
.authSally:hover{
??? display div#sally ???
}

How can this be done?

~ mo

abduraooft
11-26-2009, 01:25 AM
Currently, the two elements are unrelated (they are not parents, children, or siblings of each other). In that case you'd need to use some javascript, but let me ask, can't you make some parent-child relationship there? (After all, CSS stands for cascading stylesheet.)

PS: 1)
div.authBob:hover{
??? display div#bob ???
}
Hope you meant p there.
2) You can't nest a block level element inside <p> in any case.

mOrloff
11-26-2009, 06:29 AM
... Hope you meant p there.
Oops, yeah, that was a type-o. I edited accordingly.

... You can't nest a block level element inside <p> in any case.
If you are saying no <div>'s inside <p>'s, then thanks. I thought so, but it's always good to get a reminder.


... can't you make some parent-child relationship there? ...
Well, not really.

The content is pretty long, and switching back and forth from one author to another, then back again.
These are pages of educational content which are a result of a collaborative effort from 4 authors, so making the "about" sections children, unfortunately, isn't really practical.

Any more advice?

TIA,
~ Mo

abduraooft
11-26-2009, 06:46 AM
Any more advice? Yes, as i said above you'd need to use javascript inside the onmouseover/onmouseout attributes.

mOrloff
11-26-2009, 08:10 AM
Any suggestions (code structures or css tricks) on how to achieve our goal via CSS???

For this, I'd prefer to stay away from anything that is so easy to disable. We gave our word that the appropriate references would be made.
(Obviously, I'd like to stick with CSS if at all possible.)

Even hair-brained ideas are welcome.
Sometimes those are the mad beginnings of something brilliant.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum