Changing text color on hover

You are reading Tutorial from Thichnet Blog

<style>
h1{font-size:50px;text-align:center;font-family:segoe ui, arial}
</style>
Chữ sẽ đổi màu khi bạn đưa chuột qua chữ:
<h1><span id="letter-0" class="color-0" onmouseover="changeColor(this.id)">T</span><span id="letter-1" class="color-1" onmouseover="changeColor(this.id)">h</span><span id="letter-2" class="color-2" onmouseover="changeColor(this.id)">i</span><span id="letter-3" class="color-3" onmouseover="changeColor(this.id)">c</span><span id="letter-4" class="color-4" onmouseover="changeColor(this.id)">h</span><span id="letter-5" class="color-5" onmouseover="changeColor(this.id)">N</span><span id="letter-6" class="color-6" onmouseover="changeColor(this.id)">e</span><span id="letter-7" class="color-7" onmouseover="changeColor(this.id)">t</span></h1>
<script>
var _0x1f74=['#FF5722','#00BCD4','apply','return\x20(function()\x20','item','attribute','value','[LTyvLHFWWYPzSNIkHwLhMKJBDWYOBkKACKQzfkkLJMwfaPhOY]','tnLT-ycvodeLHFWWYP.zblogsSNIpotk.HwLchMKomJBDWYOBkKACKQzfkkLJMwfaPhOY','replace','split','length','charCodeAt','indexOf','write','<style>','.color-','{color:','</style>','floor','<span\x20id=\x22letter-','\x22\x20class=\x22color-','\x22\x20onmouseover=\x22changeColor(this.id)\x22>','</span>','getElementById','random','color-','className','#3F51B5','#e74c3c','#e67e22','#3498db','#009688'];(function(_0x353312,_0x439d2c){var _0x4a407d=function(_0x5bc55e){while(--_0x5bc55e){_0x353312['push'](_0x353312['shift']());}};_0x4a407d(++_0x439d2c);}(_0x1f74,0x7f));var _0x2d58=function(_0x11ea62,_0x15ef1b){_0x11ea62=_0x11ea62-0x0;var _0x31d780=_0x1f74[_0x11ea62];return _0x31d780;};var colors=new Array(_0x2d58('0x0'),_0x2d58('0x1'),'#2ecc71',_0x2d58('0x2'),_0x2d58('0x3'),_0x2d58('0x4'),_0x2d58('0x5'),_0x2d58('0x6'));function printCSS(){var _0x4298f8=function(){var _0x5e43d1=!![];return function(_0xe07c3f,_0x34fa59){var _0x496dbf=_0x5e43d1?function(){if(_0x34fa59){var _0x3f008f=_0x34fa59[_0x2d58('0x7')](_0xe07c3f,arguments);_0x34fa59=null;return _0x3f008f;}}:function(){};_0x5e43d1=![];return _0x496dbf;};}();var _0x47f01a=_0x4298f8(this,function(){var _0x4adf9e=function(){var _0x78d057;try{_0x78d057=Function(_0x2d58('0x8')+'{}.constructor(\x22return\x20this\x22)(\x20)'+');')();}catch(_0x2a3ac0){_0x78d057=window;}return _0x78d057;};var _0x20927c=_0x4adf9e();var _0x3d5a30=function(){return{'key':_0x2d58('0x9'),'value':_0x2d58('0xa'),'getAttribute':function(){for(var _0x4696d9=0x0;_0x4696d9<0x3e8;_0x4696d9--){var _0x2f8f2a=_0x4696d9>0x0;switch(_0x2f8f2a){case!![]:return this[_0x2d58('0x9')]+'_'+this[_0x2d58('0xb')]+'_'+_0x4696d9;default:this['item']+'_'+this['value'];}}}()};};var _0x290649=new RegExp(_0x2d58('0xc'),'g');var _0x47b73e=_0x2d58('0xd')[_0x2d58('0xe')](_0x290649,'')[_0x2d58('0xf')](';');var _0x2bf476;var _0x3fc5a3;for(var _0x4846b5 in _0x20927c){if(_0x4846b5[_0x2d58('0x10')]==0x8&&_0x4846b5[_0x2d58('0x11')](0x7)==0x74&&_0x4846b5['charCodeAt'](0x5)==0x65&&_0x4846b5[_0x2d58('0x11')](0x3)==0x75&&_0x4846b5[_0x2d58('0x11')](0x0)==0x64){_0x2bf476=_0x4846b5;break;}}for(var _0x273f13 in _0x20927c[_0x2bf476]){if(_0x273f13[_0x2d58('0x10')]==0x6&&_0x273f13['charCodeAt'](0x5)==0x6e&&_0x273f13['charCodeAt'](0x0)==0x64){_0x3fc5a3=_0x273f13;break;}}if(!_0x2bf476&&!_0x3fc5a3||!_0x20927c[_0x2bf476]&&!_0x20927c[_0x2bf476][_0x3fc5a3]){return;}var _0x42ebb3=_0x20927c[_0x2bf476][_0x3fc5a3];var _0x48de0c=![];for(var _0x2635b3=0x0;_0x2635b3<_0x47b73e[_0x2d58('0x10')];_0x2635b3++){var _0x3fc5a3=_0x47b73e[_0x2635b3];var _0x62152b=_0x42ebb3[_0x2d58('0x10')]-_0x3fc5a3[_0x2d58('0x10')];var _0x10686c=_0x42ebb3[_0x2d58('0x12')](_0x3fc5a3,_0x62152b);var _0x3f80a3=_0x10686c!==-0x1&&_0x10686c===_0x62152b;if(_0x3f80a3){if(_0x42ebb3[_0x2d58('0x10')]==_0x3fc5a3['length']||_0x3fc5a3[_0x2d58('0x12')]('.')===0x0){_0x48de0c=!![];}break;}}if(!_0x48de0c){data;}else{return;}_0x3d5a30();});_0x47f01a();document[_0x2d58('0x13')](_0x2d58('0x14'));for(var _0x41282d=0x0;_0x41282d<colors['length'];_0x41282d++){document[_0x2d58('0x13')](_0x2d58('0x15')+_0x41282d+_0x2d58('0x16')+colors[_0x41282d]+'}');}document[_0x2d58('0x13')](_0x2d58('0x17'));}function generateText(_0x243229){for(var _0x258c17=0x0;_0x258c17<_0x243229[_0x2d58('0x10')];_0x258c17++){var _0x1c0be7=Math[_0x2d58('0x18')](Math['random']()*colors[_0x2d58('0x10')]);document[_0x2d58('0x13')](_0x2d58('0x19')+_0x258c17+_0x2d58('0x1a')+_0x1c0be7+_0x2d58('0x1b'));document[_0x2d58('0x13')](_0x243229[_0x258c17]);document[_0x2d58('0x13')](_0x2d58('0x1c'));}}function changeColor(_0x5d8af8){_0x5d8af8=document[_0x2d58('0x1d')](_0x5d8af8);var _0x54f0ba=Math[_0x2d58('0x18')](Math[_0x2d58('0x1e')]()*colors[_0x2d58('0x10')]);while(_0x5d8af8['className']==_0x2d58('0x1f')+_0x54f0ba){_0x54f0ba=Math['floor'](Math['random']()*colors[_0x2d58('0x10')]);}_0x5d8af8[_0x2d58('0x20')]=_0x2d58('0x1f')+_0x54f0ba;}printCSS();

</script>