By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,447 Members | 1,136 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,447 IT Pros & Developers. It's quick & easy.

hovering div

P: 74
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
Share this Question
Share on Google+
10 Replies


drhowarddrfine
Expert 5K+
P: 7,435
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

P: 74
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

P: 74
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 5K+
P: 7,435
It should work but remember, :hover only works on <a> in IE6.
May 2 '07 #5

P: 74
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

P: 74
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 5K+
P: 7,435
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

P: 74
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 5K+
P: 7,435
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

P: 74
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.