滑鼠放在連結上實現字型放大效果

admin發表於2017-03-09
原文網址 : https://www.softwhy.com/article-2790-1.html

本章節介紹一下當滑鼠放在連結的時候改變連結文字的字型顏色和字型大小。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!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>

當滑鼠放在連結上的時候能夠改變字型的顏色和大小，當滑鼠移開的時候也能夠改變字型顏色和大小。

相關文章