467,915 Members | 1,227 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,915 developers. It's quick & easy.

hovering div

hi

i would like to have a box of text and images apear in a speech bubble stylie when i hover the mouse over an image. i want this speech bubble to sit on top of existing page content.

i was thinking of making a absolute positioned div and changing its visibility when the hover is there but not sure how to do it

i know you can do it with javascript but can anyone explain a css/html way?

cheer
philleep
Mar 22 '07 #1
  • viewed: 13568
Share:
10 Replies
drhowarddrfine
Expert 4TB
There are a couple of things you can do. First, simply adding the title attribute to the element you hover over will give you the little popup. For example, <a href="#" title="hello">link </a>.

The second thing you can do is create a div that contains a span that changes when hovered over. iow,
Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2.     span{visibility:hidden}
  3.     a:hover span{visibility:visible}
  4. </style>
  5.  
  6. </head>
  7. <body>
  8. <div><a href="#">boxy<span>hello</span></a></div>
An admittedly very crude examplel but the spanned element can be styled and you can get pretty creative with it.

The only reason you need an <a> is because IE doesn't :hover on anything else but all other browsers would allow a div:hover.
Mar 22 '07 #2
will have a go and let you know my proggress.
cheer
philleep

There are a couple of things you can do. First, simply adding the title attribute to the element you hover over will give you the little popup. For example, <a href="#" title="hello">link </a>.

The second thing you can do is create a div that contains a span that changes when hovered over. iow,
Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2.     span{visibility:hidden}
  3.     a:hover span{visibility:visible}
  4. </style>
  5.  
  6. </head>
  7. <body>
  8. <div><a href="#">boxy<span>hello</span></a></div>
An admittedly very crude examplel but the spanned element can be styled and you can get pretty creative with it.

The only reason you need an <a> is because IE doesn't :hover on anything else but all other browsers would allow a div:hover.
Mar 23 '07 #3
There are a couple of things you can do. First, simply adding the title attribute to the element you hover over will give you the little popup. For example, <a href="#" title="hello">link </a>.

The second thing you can do is create a div that contains a span that changes when hovered over. iow,
Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2.     span{visibility:hidden}
  3.     a:hover span{visibility:visible}
  4. </style>
  5.  
  6. </head>
  7. <body>
  8. <div><a href="#">boxy<span>hello</span></a></div>
An admittedly very crude examplel but the spanned element can be styled and you can get pretty creative with it.

The only reason you need an <a> is because IE doesn't :hover on anything else but all other browsers would allow a div:hover.
Hi,

should this technique work with IE too? i can only work it in FF :-(

and could i use 'onmouseover' and 'onmouseout' to do something similar?

cheer,
philleep
May 2 '07 #4
drhowarddrfine
Expert 4TB
It should work but remember, :hover only works on <a> in IE6.
May 2 '07 #5
It should work but remember, :hover only works on <a> in IE6.

ok will try it and get back to you with code if it doesnt...
cheer
philleep
May 3 '07 #6
this doesnt seem to work in IE 6 but it does in IE 7 and FF? any ideas?

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <style type="text/css">
  4.  
  5.     span{visibility:hidden}
  6.     a:hover span{
  7.         visibility:visible;
  8.         color:#FF0000;
  9.         }
  10.     #exact{
  11.         position:absolute;
  12.         top:100px;
  13.         left:100px;
  14.         }
  15.  
  16. </style>
  17. </head>
  18.  
  19. <body>
  20. <div>
  21.  
  22. <p>This is some trial text with a <a href="#">link<span><div id="exact">The other text</div></span></a> that when hovered over makes some text appear down there&hellip;</p>
  23.  
  24. </div>
  25. </body>
  26. </html>
cheer
philleep
May 4 '07 #7
drhowarddrfine
Expert 4TB
Are you using a proper doctype? IE will never pretend it's a modern browser without one See the sticky at the top of this board. Use html4.01 strict.
May 4 '07 #8
Are you using a proper doctype? IE will never pretend it's a modern browser without one See the sticky at the top of this board. Use html4.01 strict.
I've applied the correct doctype (i think) and validated my code (with dreamweaver). however that method doenst seem to work at all. any ideas now? or am i being a complete muppet?

cheer
philleep

ps my code:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <style type="text/css">
  5.  
  6.     span{visibility:hidden}
  7.     a:hover span{
  8.         visibility:visible;
  9.         color:#FF0000;
  10.         }
  11.     #exact{
  12.         position:absolute;
  13.         top:100px;
  14.         left:100px;
  15.         }
  16.  
  17. </style>
  18. </head>
  19.  
  20. <body>
  21. <div>
  22.  
  23. <p>This is some trial text with a <a href="#">link<span id="exact">The other text</span></a> that when hovered over makes some text appear down there&hellip; &copy;</p>
  24.  
  25. </div>
  26. </body>
  27. </html>
May 9 '07 #9
drhowarddrfine
Expert 4TB
Hm. I've been crippled without a Windows computer for a couple of months so I have trouble testing for IE. Fortunately, I'm getting a Windows box today but I don't immediately see why it doesn't work.
May 9 '07 #10
Hm. I've been crippled without a Windows computer for a couple of months so I have trouble testing for IE. Fortunately, I'm getting a Windows box today but I don't immediately see why it doesn't work.
well when you get the windows machine going, i would be grateful if you or someone else could try this code out.

cheer
philleep
May 10 '07 #11

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by max | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.