JavaScript鼠标悬浮改变<a>的背景颜色

当前位置：首页 > 代码实例 > html5 css3代码分类 > 其他 > JavaScript鼠标悬浮改变<a>的背景颜色

很多网页都有这样的效果，当鼠标悬浮在链接之上的时候，能够改变链接的背景颜色，当然也可以用单纯的CSS实现此效果，具体可以参阅CSS实现鼠标悬浮在链接之上背景变色代码一章节，下面就介绍一下如何使用js实现此效果。

实例代码:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.51qianduan.com/" /> 
<title>51前端</title> 
<style type="text/css"> 
li{list-style:none} 
a{ 
  display:block; 
  width:100px; 
  height:30px; 
  line-height:30px; 
  text-align:center; 
  background-color:#60F; 
  color:white;
  margin-top:5px; 
  text-decoration:none; 
} 
</style> 
<script type="text/javascript">  
window.onload=function(){ 
  var oul=document.getElementById("box"); 
  var links=document.getElementsByTagName("a"); 
  for(var i=0;i<links.length;i++){ 
    links[i].onmouseover=function(){ 
      for(var j=0;j<links.length;j++){ 
        links[j].style.backgroundColor="#60F"; 
      } 
      this.style.backgroundColor="red"; 
    } 
  } 
} 
</script> 
</head> 
<body> 
<ul id="box"> 
  <li><a href="#">51前端一</a></li> 
  <li><a href="#">51前端二</a></li> 
  <li><a href="#">51前端三</a></li> 
  <li><a href="#">51前端四</a></li> 
  <li><a href="#">51前端五</a></li> 
</ul> 
</body> 
</html>

代码描述：JavaScript 鼠标悬浮改变<a>背景颜色。JavaScript鼠标悬浮改变<a>的背景颜色

下载全部收藏

209 278

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册