PDA

Click to See Complete Forum and Search --> : changing hover text color

esthera
05-16-2004, 04:04 AM
My text colors are all in css.

When an image is rolled over I want the text above it to change color to the hover color.
How can I change the color? My colors are set in my css.
Fang
05-16-2004, 04:31 AM
Have the image in the link:
<a href="#">hello<br /><img alt="myimage" src="myimage.gif" height="20" width="30" /></a>
css: a:hover {color: green;}
spufi
05-16-2004, 04:50 AM
Originally posted by Fang
Have the image in the link:
<a href="#">hello<br /><img alt="myimage" src="myimage.gif" height="20" width="30" /></a>
css: a:hover {color: green;}

I would prefer this way. Not really sure it would be the best way though because you are technically using a block level element in a inline element.

Markup:

<a href="#">Hello<img src="myimage.gif" alt="myimage"></a>

CSS:
a img {
display:block;
width:30px;
height:20px;
}

a:hover {
color:#0F0;
}
Fang
05-16-2004, 05:03 AM
spufi wrotetechnically using a block level element in a inline element
anchor and image are inline elements
esthera
05-16-2004, 05:58 AM
I don't understand the solution:
Here's my code below:

I want that when the image is rolled over (in addition to the image chaning) the text above it (ABOUT US) should also change colors to the hover state.


<tr><td align="center" class=sidelinks><a href=aboutus.html onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('aboutus','','images/aboutus_on.gif',1)" class=sidelinks>ABOUT US</a><br>
<a href="aboutus.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('aboutus','','images/aboutus_on.gif',1)"><img src="images/aboutus.gif" alt="About Us" name="aboutus" width="50" height="50" border="0"></a></td>

</tr>
Fang
05-16-2004, 07:40 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>rollover</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
//<![CDATA[
<!--
// all JavaScript here
//-->
//]]>
</script>

<style type="text/css">
<!--
/* cascading style sheet */
a:hover {color: green;}

-->
</style>

</head>
<body>
<!-- html here -->
<table border="0" cellpadding="0" cellspacing="0" summary="">
<tr>
<td align="center" class="sidelinks">
<a href="aboutus.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('aboutus','','images/aboutus_on.gif',1)" class="sidelinks">ABOUT US<br>
<img src="images/aboutus.gif" alt="About Us" name="aboutus" width="50" height="50" border="0"></a>
</td>
</tr>
</table>
</body>
</html>
esthera
05-16-2004, 08:55 AM
Thanks!!!
Easy code and works great!
spufi
05-16-2004, 07:38 PM
Originally posted by Fang
anchor and image are inline elements

In the code I provided the image is actually made a block level element.