站长网(Downzz.com)
站长网(Downzz.com)
当前位置:首页 > 站长教程 > 建站经验 > JS教程
JavaScript鼠标移入和移出切换样式_JS实例
时间:2019-10-28 01:57:52 围观:786 来源:Downzz
切换样式的用法非常的广泛,例如当鼠标移动到导航栏或者离开导航栏会出现不同的样式变化。

下面就介绍一下如何利用javascript实现样式的切换效果。代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.downzz.com/" />
<title>Downzz.com</title>
<style type="text/css">
body {
  color: #fff;
  font: 12px/1.5 Tahoma;
}
#div1 {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  padding: 10px;
  background: black;
  border: 10px solid #000;
  cursor: crosshair;
}
#div1.hover {
  color: red;
  background: #f0f0f0;
  border: 10px solid red;
}
</style>
<script type="text/javascript">
window.onload = function () {
  var oDiv = document.getElementById("div1");
  oDiv.onmouseover = function () {
    oDiv.className = "hover"
  };
  oDiv.onmouseout = function () {
    oDiv.className = ""
  }
}
</script>
</head>
<body>
<div id="div1">鼠标移入改变样式,鼠标移出恢复。</div>
</body>
</html>

以上代码实现了我们想要的功能,下面简单介绍一下如何实现i功能:

一.实现原理:

为div元素分别绑定onmouseover事件和onmouseout事件用来控制当鼠标移到和离开div的样式。

二.代码注释:

1.window.onload=function(){},用以在文档完全加载完毕再去执行函数。

2.var oDiv=document.getElementById("div1"),用以获取div对象。

3.oDiv.onmouseover=function(){},用以给div绑定omouserover事件处理函数。

4.oDiv.className="hover",将div的class设置为hover。

文章为作者独立观点不代表本网立场,未经允许不得转载。