Jquery Color Changing Text Script

Use this simple jquery copy paste script to change text colors in your webpage on mouse hover.


  • Script is based on the Jquery Event change() method.
  • Showcase multiple colors smoothly on a text when mouse hover is made.
  • Use jquery to hover a text with animation.
  • Copy paste code for color changing text.
  • Color animation that works on almost all modern browsers.


Color Changing Text Effect on Mouse Over

  • Every one can find fault, few can do better

  • Fire is a good servant but a bad master

  • Better the devil you know than the devil you don't know

  • Curses are like chickens, they come home to roost

  • Love covers a multitude of sins

  • Mirrors do everything we do, but they cannot think for themselves


<!-- Script by hscripts.com -->
<!-- Copyright by Hscripts -->
<!-- More scripts @www.hscripts.com -->
<html><head><title>Color Changing Text Effect on Mouse Over</title><script type='text/javascript' src='./jquery.js'></script>
<script type='text/javascript'>
var degre = 30;
// Degree of colors
var act = 0; // Flag during the action
var hueelt = 0; // Hue
var firselt = 128; // Saturation
var valelt = 255; // Value
var clrColor; // A color before the change
var timer; // Timer
mover(idd) {$('#iid').val(idd)timer = setInterval("colorsChange()",100);
function mout(idd) {$('#'+idd).css('color','#000');clearInterval(timer);
// This function changes a color actually.
function colorsChange()
{var idd=$('#iid').val();
var clr=makesColors();$('#'+idd).css('color',clr);
// This function makes rainbow colors.
function makesColors()
{// HSVtoRGBif (firselt == 0){redelt = valelt; greelt = valelt; bluelt = valelt;}else{temp1 = valelt;temp2 = (255 - firselt) * valelt / 255;temp3 = hueelt % 60;temp3 = (temp1 - temp2) * temp3 / 60;if (hueelt < 60){redelt = temp1; bluelt = temp2; greelt = temp2 + temp3;}else if (hueelt < 120){greelt = temp1; bluelt = temp2; redelt = temp1 - temp3;}else if (hueelt < 180){greelt = temp1; redelt = temp2; bluelt = temp2 + temp3;}else if (hueelt < 240){bluelt = temp1; redelt = temp2; greelt = temp1 - temp3;}else if (hueelt < 300){bluelt = temp1; greelt = temp2; redelt = temp2 + temp3;}else if (hueelt < 360){redelt = temp1; greelt = temp2; bluelt = temp1 - temp3;}else{redelt = 0; greelt = 0; bluelt = 0;}}redelt = Math.floor(redelt).toString(16);greelt = Math.floor(greelt).toString(16);bluelt = Math.floor(bluelt).toString(16);if (redelt.length == 1) redelt = "0" + redelt;if (greelt.length == 1) greelt = "0" + greelt;if (bluelt.length == 1) bluelt = "0" + bluelt;hueelt = hueelt + degre;if (hueelt >= 360)hueelt = 0;return '#' + redelt + greelt + bluelt;
<style type='text/css'>
.textover{cursor: pointer;width: 450px;text-align: justify;
<div style=' padding-top: 50px; font-weight: bold; color: #4e4e4e;' align=center><h1>Color Changing Text Effect on Mouse Over</h1></div><div align='center' style='padding-left: 10px; padding-top: 25px;'><ul class='stle'><li id='p1' onmouseover='mover(this.id)' onmouseout='mout(this.id)' class='textover'> Every one can find fault, few can do better</li><br><li id='p2' onmouseover='mover(this.id)' onmouseout='mout(this.id)' class='textover'> Fire is a good servant but a bad master</li><br><li id='p3' onmouseover='mover(this.id)' onmouseout='mout(this.id)' class='textover'> Better the devil you know than the devil you don't know</li><br><li id='p4' onmouseover='mover(this.id)' onmouseout='mout(this.id)' class='textover'> Curses are like chickens, they come home to roost</li><br><li id='p5' onmouseover='mover(this.id)' onmouseout='mout(this.id)' class='textover'> Love covers a multitude of sins</li><br><li id='p6' onmouseover='mover(this.id)' onmouseout='mout(this.id)' class='textover'> Mirrors do everything we do, but they cannot think for themselves</li></ul>
</div><table><tr><td><div style=" padding-left: 650px;font-size: 10px;color: #dadada;" id="dumdiv">
<a href="//www.hscripts.com" id="dum" style="padding-right:0px; text-decoration:none;color: green;">©h</a></div></td></tr>
<input type='hidden' id='iid' value=''></body>

  • Release Date - 02-04-2013
  • Get free version without ©copyright link for just $10/-
  • For customization of this script or any script development, mail to support@hscripts.com


  • Copy paste the Jquery color changing script in your webpage.
  • Download jquery.js file and place the file in your folder.
  • Now run the file in your browser to view the functionality of the script.
  • You can change the sentences for which you want to animate the changing effects.
    <p align="center">Every one can find fault, few can do better</p> // Change the sentences here.


  • This Jquery code is given under GPL License
  • i.e. Free use for those who use the codes as it is.
  • Free, if your modification does not remove our copyright information and links.
  • Detailed License information can be found here.
  • You can purchase the script if your requirements does not meet our GPL License terms.

Related Scripts

Jquery Download

Ask Questions

Ask Question