www.webdeveloper.com
Results 1 to 2 of 2

Thread: On Mouse Over - Box appears with message

  1. #1
    Join Date
    Nov 2002
    Posts
    76

    On Mouse Over - Box appears with message

    This may be a mispost, as this could be a DHMTL issue, but here goes anyway:

    The effect I want to achieve, is for a box with some text to appear when a mouse is pointed at a link. Is this possible to achieve with just CSS?

    Thanks in advance for answers or re-direction.

    Franz

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    Actually, you can make a tool tip appear by placing text in the link tag's title attribute.
    Code:
    <a href="http://www.w3.org/" title="View published Web standards">
     W3C
    </a>
    Or how about:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css" media="screen">
    <!--
    .linkpopup {
     position: relative;
    }
    
    .linkpopup span {
     background-color: #ccc;
     border: 1px solid #000;
     display: block;
     left: 0;
     padding: .25em;
     position: absolute;
     top: -1.75em;
    }
    
    .linkpopup:link span,
    .linkpopup:visited span {
     visibility: hidden;
    }
    
    .linkpopup:hover span,
    .linkpopup:focus span,
    .linkpopup:active span {
     color: #000;
     text-decoration: none;
     visibility: visible;
    }
    -->
    </style>
    
    </head>
    <body>
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <a href="blah.html" class="linkpopup">Link text <span>Description text</span></a>
    </body>
    </html>
    The above code works in Firefox, but not IE-Win.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles