hovering div

philleep

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

drhowarddrfine

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

 <style type="text/css">

    span{visibility:hidden}

    a:hover span{visibility:visible}

</style>
 
</head>

<body>

<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.

philleep

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

<style type="text/css">

span{visibility:hidden}

a:hover span{visibility:visible}

</style>

</head>

<body>

<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.

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

<style type="text/css">

span{visibility:hidden}

a:hover span{visibility:visible}

</style>

</head>

<body>

<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

drhowarddrfine

It should work but remember, :hover only works on <a> in IE6.

philleep

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

philleep

this doesnt seem to work in IE 6 but it does in IE 7 and FF? any ideas?

Expand|Select|Wrap|Line Numbers

 <html>

<head>

<style type="text/css">
 
    span{visibility:hidden}

    a:hover span{

        visibility:visible;

        color:#FF0000;

        }

    #exact{

        position:absolute;

        top:100px;

        left:100px;

        }
 
</style>

</head>
 
<body>

<div>
 
<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>
 
</div>

</body>

</html>

cheer
philleep

drhowarddrfine

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.

philleep

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

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<style type="text/css">
 
    span{visibility:hidden}

    a:hover span{

        visibility:visible;

        color:#FF0000;

        }

    #exact{

        position:absolute;

        top:100px;

        left:100px;

        }
 
</style>

</head>
 
<body>

<div>
 
<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>
 
</div>

</body>

</html>

drhowarddrfine

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.

philleep

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

hovering div

Post your reply

Similar topics