Thay đổi màu chữ khi rê chuột qua

Thay đổi màu chữ khi rê chuột qua là một hiệu ứng khá bắt mắt, từng ký tự một trong đoạn văn bản sẽ đổi màu khi bạn rê chuột qua, và mỗi lần là một màu khác nhau. Bước 1: Đặt đoạn code sau vào nơi muốn hiện chữ:

<span id="letter-0" class="color-0" onmouseover="changeColor(this.id)">T</span>span>
<span id="letter-1" class="color-1" onmouseover="changeColor(this.id)">h</span>span>
<span id="letter-2" class="color-2" onmouseover="changeColor(this.id)">i</span>span>
<span id="letter-3" class="color-3" onmouseover="changeColor(this.id)">c</span>span>
<span id="letter-4" class="color-4" onmouseover="changeColor(this.id)">h</span>span>
<span id="letter-5" class="color-5" onmouseover="changeColor(this.id)">N</span>span>
<span id="letter-6" class="color-6" onmouseover="changeColor(this.id)">e</span>span>
<span id="letter-7" class="color-7" onmouseover="changeColor(this.id)">t</span>span>

Lưu ý:
- Thay các chữ cái bằng ký tự bạn muốn, nội dung dài hoặc ngắn hơn do các bạn tùy chỉnh
- Có thể đặt đoạn code trên ở bên trong thẻ h1, h2... để dễ dàng chỉnh cỡ chữ mong muốn.

Bước 2: Thêm đoạn Javascipt vào phía trên thẻ đóng </body>

<script>
//Colors to use in text
var colors=new Array('#3F51B5','#e74c3c','#2ecc71','#e67e22','#3498db','#009688','#FF5722','#00BCD4');
//Function that prints required classes
function printCSS(){
    document.write('<style>');
    
    for(var i=0;i<colors.length;i++){
        document.write('.color-'+i+'{color:'+colors[i]+'}');
    }
    
    document.write('</style>');
}
//Function that generates the text
function generateText(text){
    for(var i=0;i<text.length;i++){
        var rnd=Math.floor(Math.random()*colors.length);
    
        document.write('<span id="letter-'+i+'" class="color-'+rnd+'" onmouseover="changeColor(this.id)">');
        document.write(text[i]);
        document.write('</span>');
    }
}
//Function that changes color of letter
function changeColor(el){
    el=document.getElementById(el);
    var rnd=Math.floor(Math.random()*colors.length);
  
    while(el.className=='color-'+rnd){
        rnd=Math.floor(Math.random()*colors.length);
    }
  
    el.className='color-'+rnd;
}
printCSS();

</script>