Change Text Color with Mouseover

**vkbarefoot** · 11-30-2007, 02: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, 02: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> )

Code:

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

put this wherever you need the link

Code:

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

Code:

<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.

Code:

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

Code:

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

put this in your <head> tag.

**coolguy** · 11-30-2007, 02: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, 05:32 PM

Originally Posted by coolguy

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

Thread: Change Text Color with Mouseover

Thread Tools

Search Thread

Change Text Color with Mouseover

Bookmarks

Bookmarks

Posting Permissions