鼠标放在链接上实现字体放大效果

鼠标放在链接上实现字体放大效果:
本章节介绍一下当鼠标放在链接的时候改变链接文字的字体颜色和字体大小,当然实际应用中可能没有简单,不过可以通过此实例进行一下扩展实现想要的功能。代码实例如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>鼠标悬浮字体放大效果-蚂蚁部落</title>
<style type="text/css"> 
body{ 
  font-family:Verdana; 
  font-size:9pt; 
  color:#000080 
} 
</style> 
<script type="text/javascript"> 
function linkOver(){ 
  this.style.color="red"; 
  this.style.fontSize="36px"; 
} 
function linkOut(){ 
  this.style.color="blue" 
  this.style.fontSize="12px"; 
} 
window.onload=function(){
  var mylink=document.getElementById("mylink");
  mylink.onmouseover=linkOver;
  mylink.onmouseout=linkOut;
}
</script> 
</head> 
<body> 
<a href="#" id="mylink">蚂蚁部落</a>
</body> 
</html> 

 以上代码中,当鼠标放在链接上的时候能够改变字体的颜色和大小,当鼠标移开的时候也能够改变字体颜色和大小。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8296

跟多内容可以参阅:http://www.softwhy.com/javascript/

猜你喜欢

转载自softwhy.iteye.com/blog/2266573
今日推荐