jQuery hover事件

admin發表於2018-01-23
jQuery事件

滑鼠移入和移出匹配元素都會觸發此事件，從而執行相應的事件處理函式。

此事件實質是mouseenter事件和mouseleave事件的結合體。

語法結構一:

[JavaScript] 純文字檢視 複製程式碼
.hover(handlerIn(eventObject), handlerOut(eventObject))

引數解析:

（1）.handlerIn(eventObject):當滑鼠移入時執行的函式；eventObject為事件物件。

（2）.handlerOut(eventObject)):當滑鼠移出時執行的函式；eventObject為事件物件。

jQuery1.0版本新增。

語法結構二:

[JavaScript] 純文字檢視 複製程式碼
.hover(handlerInOut(eventObject))

引數解析:

handlerInOut(eventObject)：滑鼠移入和移出都執行同一個函式；eventObject為事件物件。

jQuery1.4版本新增。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").hover(function () {
    $(this).css("background-color","green")
  },function(){
    $(this).css("background-color", "white")
  });
})
</script>
</head>
<body>
<input type="text" name="txt" />
</body>
</html>

滑鼠移入和移出能夠給文字框設定不同的背景顏色。

相關文章