jquery-中的滑鼠事件
<!DOCTYPE html>
<html
lang="en">
<head>
<meta
charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0">
<meta
http-equiv="X-UA-Compatible"
content="ie=edge">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
background: red;
overflow: hidden;
}
.box1{
height: 100px;
background: green;
margin-top: 100px;
color: white;
font-size: 50px;
}
</style>
<script
src="../js/jquery-1.12.4.min.js"></script>
<script>
$(function (){
// 1.進入子元素 會觸發的事件
var index =
0;
// $(".box").mouseover(function (){
// index ++;
// $(".box1").html(index);
// })
// 2.進入子元素 不會觸發的事件
// $(".box").mouseout(function (){
// index ++;
// $(".box1").html(index);
// })
// 工作中使用 最常用的
// $(".box").mouseenter(function (){
// index ++;
// $(".box1").html(index);
// })
// $(".box").mouseleave(function (){
// index ++;
// $(".box1").html(index);
// })
// 3.hover()
$(".box").hover(function (){
index ++;
$(".box1").html(index);
})
})
</script>
</head>
<body>
<div
class="box">
<div
class="box1"></div>
</div>
</body>
</html>
相關文章
- jquery-中的事件委託jQuery事件
- QGraphicsScene中捕捉滑鼠事件CSS事件
- jquery-中的冒泡案例jQuery
- JavaScript滑鼠中鍵滾動事件JavaScript事件
- ALV中滑鼠雙擊事件事件
- angular 的滑鼠事件Angular事件
- 滑鼠事件事件
- tkinter中滑鼠與鍵盤事件(十五)事件
- 滑鼠拖拽事件事件
- 再問applet中的滑鼠事件問題!!APP事件
- Qt Creator中滑鼠鍵盤事件的處理實現自定義滑鼠指標QT事件指標
- [VC] 滑鼠事件的響應事件
- jquery-滑鼠經過導航條,顯示二級下拉選單jQuery
- 監聽滑鼠事件事件
- 滑鼠、鍵盤事件事件
- 事件 滑鼠事件 表單事件 from表單事件
- javaScript事件(五)事件型別之滑鼠事件JavaScript事件型別
- 相容所有瀏覽器的js滑鼠中鍵滾動事件瀏覽器JS事件
- React滑鼠點選事件物件中的幾個用到的屬性React事件物件
- AngularJs 鍵盤事件和滑鼠事件AngularJS事件
- jQuery 事件(一) 滑鼠與鍵盤事件jQuery事件
- 滑鼠中鍵滾動mousewheel事件例項程式碼事件
- wx模擬滑鼠事件事件
- wx處理滑鼠事件事件
- 禁止滑鼠點選事件事件
- JavaScriptFAQ(十四)——滑鼠事件(一)JavaScript事件
- Dos下的滑鼠完全控制類 --- 使用它可以很好的控制你的Dos程式中的滑鼠事件! (轉)事件
- JQuery4:滑鼠事件和滾動事件jQuery事件
- js實現的相容所有瀏覽器的滑鼠中鍵滾動事件JS瀏覽器事件
- 滑鼠進入移出事件事件
- C#窗體--滑鼠事件C#事件
- css禁用滑鼠點選事件CSS事件
- JQuery-入門jQuery
- 1.21 JQuery4:滑鼠事件與滾動事件jQuery事件
- JavaScript進階系列07,滑鼠事件JavaScript事件
- JavaScript和JQuery的滑鼠mouse事件冒泡處理JavaScriptjQuery事件
- jquery實現的右鍵滑鼠點選事件jQuery事件
- jQuery-錨點動畫jQuery動畫