<!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> .red{ width: 400px; height: 400px; background: red; overflow: hidden; } .green{ height: 100px; background: green; margin-top: 100px; font-size: 30px; color: white; font-weight: bold; } </style> <script src="./jquery-1.12.4.min.js"></script> <script> $(function(){ //mouseover mouseout 进入子元素也会触发事件 var index = 0; // $('.red').mouseover(function(){ // index++; // $('.green').html(index); // }) // $('.red').mouseout(function(){ // index++; // $('.green').html(index); // }) //mouseenter mouseleave 进入子元素不会触发事件 // $('.red').mouseenter(function(){ // index++; // $('.green').html(index); // }) // $('.red').mouseleave(function(){ // index++; // $('.green').html(index); // }) //hover(进去和出去都触发事件) 相当于mouseenter和mouseleave的结合 $('.red').hover(function(){ index++; $('.green').html(index); }) }) </script> </head> <body> <div class="red"> <div class="green"></div> </div> </body> </html>
jquery的鼠标事件
猜你喜欢
转载自blog.csdn.net/owc1874/article/details/80752854
今日推荐
周排行