<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#caidan{
width:500px; height:35px; border:1px solid #60f;
}
.xiang{
width:100px;
height:35px;
text-align:center;
line-height:35px;
vertical-align:middle;
float:left;
}
</style>
</head>
<body>
<div id="caidan">
<div class="xiang" onMouseOver="huan(this)">首页</div>
<div class="xiang" onMouseOver="huan(this)">产品中心</div>
<div class="xiang" onMouseOver="huan(this)">服务中心</div>
<div class="xiang" onMouseOver="huan(this)">联系我们</div>
</div>
</body>
<script type="text/javascript">
/*-------------------以后常用-----下面的------------------------*/
function huan(a)
{
//将所有的項回复原样式
var d=document.getElementsByClassName("xiang");
for(var i=0;i<d.length;i++)
{
d[i].style.backgroundColor="white";
d[i].style.color="black";
}
//换该元素的样式 鼠标移上去换色
a.style.backgroundColor="red";
a.style.color ="white";
//
}
<!-------------------第二种方式也可以实现效果-------------------------------------->
/*<div id="caidan">
<div class="xiang" onMouseOver="huan(this)" onMouseOut="huifu(this)">首页</div>
<div class="xiang" onMouseOver="huan(this)" onMouseOut="huifu(this)">产品中心</div>
<div class="xiang" onMouseOver="huan(this)" onMouseOut="huifu(this)">服务中心</div>
<div class="xiang" onMouseOver="huan(this)" onMouseOut="huifu(this)">联系我们</div>
</div>
function huifu(a)
{
a.style.backgroundColor="white";//文字是黑色
a.style.color="white";
}*/
</script>
</html>
时间： 2024-10-07 18:10:10