Here the method of communication with the JavaScript in this blog "Mouse move out of the background color gradient" in the same way, I posted the code is all there, we can copy the past directly to see the effect, there are better suggestions of the hope message ...
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Move mouse over font move out font color gradient</title> <style> *{margin:0;padding:0; }ul{margin:10px Auto;padding:20px;width:100px;Background-color:#B7B7B7;font-size:20px; }ul Li{List-style-type:None;Height:25px;Line-height:25px;text-align:Center; }a{text-decoration:None;Color:#fff; } </style></Head><Body> <ulID= "Con"> <Li><ahref= "javascript:;">One</a></Li> <Li><ahref= "javascript:;">Both</a></Li> <Li><ahref= "javascript:;">Three</a></Li> <Li><ahref= "javascript:;">Four</a></Li> <Li><ahref= "javascript:;">Five</a></Li> <Li><ahref= "javascript:;">Six</a></Li> </ul> <Script> varlinks=document.getElementById ("Con"). getElementsByTagName ("a"); for (varI= 0; I<links.length; I++) { //The reference here is the same as the one in this blog JavaScript, "Mouse fade out background color change", using the critical valueLinks[i].onmouseover= function() {ChangeColor ( This, the);//This is a very clever way to pass the object to the function, and this is a beautiful} links[i].onmouseout= function() {ChangeColor ( This,0); } }; functionChangeColor (obj,color_val) {clearinterval (Obj.timer); varI=Color_val; Obj.timer=SetInterval (function() {Color_val?I--: I++;//This may be the master's writing, color_val equivalent to converting integers to Boolean values when the rule varresult=GetColor (i); Obj.style.color=result; if(i==0||I== the) {clearinterval (Obj.timer); } }, -); } //Convert the color value to 16, referring to a 16 color representation rule, the lighter the color becomes functionGetColor (color) {varresult= ""; for(varI=0; I<3; I++) {result+=color.tostring ( -); } return "#"+result; } </Script></Body></HTML>mouse moves on font, font color gradient
Mouse moves on font, font color gradient
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
