hovering div

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • philleep
    New Member
    • Mar 2007
    • 74
    #1

    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
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      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">l ink </a>.

      The second thing you can do is create a div that contains a span that changes when hovered over. iow,
      Code:
      <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.

        Comment

        • philleep
          New Member
          • Mar 2007
          • 74
          #3
          will have a go and let you know my proggress.
          cheer
          philleep

          Originally posted by 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">l ink </a>.

          The second thing you can do is create a div that contains a span that changes when hovered over. iow,
          Code:
          <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.

            Comment

            • philleep
              New Member
              • Mar 2007
              • 74
              #4
              Originally posted by 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">l ink </a>.

              The second thing you can do is create a div that contains a span that changes when hovered over. iow,
              Code:
              <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

                Comment

                • drhowarddrfine
                  Recognized Expert Expert
                  • Sep 2006
                  • 7434
                  #5
                  It should work but remember, :hover only works on <a> in IE6.

                    Comment

                    • philleep
                      New Member
                      • Mar 2007
                      • 74
                      #6
                      Originally posted by drhowarddrfine
                      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

                        Comment

                        • philleep
                          New Member
                          • Mar 2007
                          • 74
                          #7
                          this doesnt seem to work in IE 6 but it does in IE 7 and FF? any ideas?

                          Code:
                          <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

                            Comment

                            • drhowarddrfine
                              Recognized Expert Expert
                              • Sep 2006
                              • 7434
                              #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.

                                Comment

                                • philleep
                                  New Member
                                  • Mar 2007
                                  • 74
                                  #9
                                  Originally posted by 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.
                                  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:

                                  Code:
                                  <!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>

                                    Comment

                                    • drhowarddrfine
                                      Recognized Expert Expert
                                      • Sep 2006
                                      • 7434
                                      #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.

                                        Comment

                                        • philleep
                                          New Member
                                          • Mar 2007
                                          • 74
                                          #11
                                          Originally posted by 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.
                                          well when you get the windows machine going, i would be grateful if you or someone else could try this code out.

                                          cheer
                                          philleep

                                            Comment

                                            Previous template Next
                                            Working...