html/css for a text hover box

[buddy218]

ok i have a members page on my website(http://clanminers.net/) and i want it so when you hover your mouse over a members name a black box appears with information on that member, i want it to be white text, also i want it so when the mouse leaves the members name the box goes away, how do i do this?

 

[TheMan177]

Take a look at this:
http://psacake.com/web/jl.asp

 

[buddy218]

thx but how do i use this in a html page? and what do i insert in the css file?
do i add this to the css file?

a.info{
position:relative; /*this is the key*/
z-index:24; background-color:#ccc;
color:#000;
text-decoration:none}

a.info:hover{z-index:25; background-color:#ff0}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #0cf;
background-color:#cff; color:#000;
text-align: center}

so what would i put in the html file to make it work?

 

[marshian]

You have to do that with javascript.
You should make one black box with no text in it, position absolute etc, and then use events to determine wether the box should appear, and put the right content in it.

 

[buddy218]

huh?

 

[TheMan177]

You have to do that with javascript.
You should make one black box with no text in it, position absolute etc, and then use events to determine wether the box should appear, and put the right content in it.

Doesn't the CSS hover state already achieve that? Assuming he wants it to only show on mouseover of course.

buddy218,

Yes that goes in your css file, with the classes changed to match the member's names. Take a look at the source of that page I gave you to see how the links are used.

 

[buddy218]

i got it to work already forgot to post

 

[lordsofvine]

try www.w3schools.com