Hi there,
I have an HTML page with one large background image in the left corner.
I've got various links positioned randomly on the image, and I use <span>
tags to display text on another section of the page when hovering over the
links. Here's an example of the code:
<head>
<title>My Title</title>
<style type="text/css">
<!--
a#link1 {font: bold 1em sans-serif; text-decoration: none; color: #000080;
position: absolute; top: 1px; left: 4px }
a#link1:hover {color: #411; background: FFFFFF}
a#link1 span {display: none}
a#link1:hover span {display: block;
position: absolute; top: 275px; left: 600; width: 300px;
padding: 5px; margin: 10px; z-index: 100;
color: black;
font: 10px Verdana; text-align: center;}
-->
</style>
</head>
<body >
<div align="left">
<p><img src="image.jpg" width="600" height="400">
</div>
<a id="link1" href="URL"> My Link <span> The text that goes with My Link
</span></a>
</body>
My problem is that I don't want the link itself to have a background color
specified on the hover (This line: "a#link1:ho ver {color: #411; background:
FFFFFF}"). The background image is multi-colored, so it looks strange. But
without it...the text in the <span> tags will not appear. Does anyone have
any suggestions?
Thanks in advance,
Shannon
I have an HTML page with one large background image in the left corner.
I've got various links positioned randomly on the image, and I use <span>
tags to display text on another section of the page when hovering over the
links. Here's an example of the code:
<head>
<title>My Title</title>
<style type="text/css">
<!--
a#link1 {font: bold 1em sans-serif; text-decoration: none; color: #000080;
position: absolute; top: 1px; left: 4px }
a#link1:hover {color: #411; background: FFFFFF}
a#link1 span {display: none}
a#link1:hover span {display: block;
position: absolute; top: 275px; left: 600; width: 300px;
padding: 5px; margin: 10px; z-index: 100;
color: black;
font: 10px Verdana; text-align: center;}
-->
</style>
</head>
<body >
<div align="left">
<p><img src="image.jpg" width="600" height="400">
</div>
<a id="link1" href="URL"> My Link <span> The text that goes with My Link
</span></a>
</body>
My problem is that I don't want the link itself to have a background color
specified on the hover (This line: "a#link1:ho ver {color: #411; background:
FFFFFF}"). The background image is multi-colored, so it looks strange. But
without it...the text in the <span> tags will not appear. Does anyone have
any suggestions?
Thanks in advance,
Shannon
Comment