html/css for a text hover box

Discussion in 'Scripts, 3rd Party Apps, and Programming' started by buddy218, Aug 6, 2008.

  1. buddy218

    buddy218 New Member

    Messages:
    30
    Likes Received:
    0
    Trophy Points:
    0
    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?
     
  2. TheMan177

    TheMan177 New Member

    Messages:
    179
    Likes Received:
    0
    Trophy Points:
    0
  3. buddy218

    buddy218 New Member

    Messages:
    30
    Likes Received:
    0
    Trophy Points:
    0
    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?
    so what would i put in the html file to make it work?
     
  4. marshian

    marshian New Member

    Messages:
    526
    Likes Received:
    9
    Trophy Points:
    0
    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.
     
  5. buddy218

    buddy218 New Member

    Messages:
    30
    Likes Received:
    0
    Trophy Points:
    0
  6. TheMan177

    TheMan177 New Member

    Messages:
    179
    Likes Received:
    0
    Trophy Points:
    0
    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.
     
  7. buddy218

    buddy218 New Member

    Messages:
    30
    Likes Received:
    0
    Trophy Points:
    0
    i got it to work already forgot to post
     
  8. lordsofvine

    lordsofvine New Member

    Messages:
    41
    Likes Received:
    0
    Trophy Points:
    0

    Attached Files:

    • logo.jpg
      logo.jpg
      File size:
      37.2 KB
      Views:
      150

Share This Page