JavaScript滑鼠移入和移出切換樣式

admin發表於2017-02-11
JavaScript
切換樣式的用法非常的廣泛，例如當滑鼠移動到導航欄或者離開導航欄會出現不同的樣式變化。

下面就介紹一下如何利用javascript實現樣式的切換效果。程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</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。

相關文章