Log in

View Full Version : Change Text Color with Mouseover


vkbarefoot
11-30-2007, 03:08 PM
Is it possible to change the text color with a mouseover effect without using images, just the plain text?

Thank you .... viki barefoot
boogyman
11-30-2007, 03:25 PM
yes you can, however you will need to use a combination of CSS and Javascript. for standards browsers (Basically all BUT Internet Explorer) you can just use the tag, however because IE doesnt support the psuedo selectors for any tag but anchor, you will need to encorporate a javascript hack.

ANCHOR TAG ( <a href=''>...</a> )


<a class="changeBlue" href="/path/to/file.ext">Link</a>

put this wherever you need the link



a.changeBlue:link { /* default link color */
color: #000000;
}
a.changeBlue:hover { /* change to blue on mouseover */
color: #0000ff;
}

put this in your stylesheet


NON - ANCHOR TAG


<p class="changeBlue">THIS IS SOME TEXT THAT I WANT CHANGED TO BLUE<p>

put this in your <body> tag, whereever you want the change to occur.




p.changeBlue { /* creates the default color as black */
color: #000000;
}
p.changeBlue:hover { /* changes the color of the text to blue on mouseover */
color: #0000ff;
}

put this in your css stylesheet



<script type="text/javascript">
document.getElementByClass('changeBlue').onmouseover.style.color = "#0000ff;';
</script>

put this in your <head> tag.
coolguy
11-30-2007, 03:37 PM
Yes, it is easy. Make sure the text has a class, for example:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>

<style>
.TheTextOff{
color:#ff0000;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
}

.TheTextOn{
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
}
</style>
</head>

<body>

<div class="TheTextOff" onmouseover="this.className='TheTextOn'" onmouseout="this.className='TheTextOff'">Some text you want to change color</div>

</body>
</html>
mdk_adelk
12-18-2012, 06:32 PM
Yes, it is easy. Make sure the text has a class, for example:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>

<style>
.TheTextOff{
color:#ff0000;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
}

.TheTextOn{
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
}
</style>
</head>

<body>

<div class="TheTextOff" onmouseover="this.className='TheTextOn'" onmouseout="this.className='TheTextOff'">Some text you want to change color</div>

</body>
</html>



How this script looks like if you want to add a link to that title wich you want to add the effect? Like an anchor but with change color mouseover effect :)