On Mouse Over - Box appears with message

**wastlinger** · 05-12-2005 09:46 AM

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

**toicontien** · 05-12-2005 10:19 AM

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: On Mouse Over - Box appears with message

Thread Tools

Display

On Mouse Over - Box appears with message

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions