Mouse Event
In the last lesson, when I clicked something happened. This time, let's do something by hovering the mouse pointer.
mouseenter();
Just change click() in the last lesson to mouseenter().
$('.class_name').mouseenter();
Create event when mouse pointer leaves an element
mouseleave();
Use mouseleave(); to generate an event when the mouse pointer leaves an element.
$('.class_name').mouseleave();
How to use
Let's test mouseenter() and mouseleave()
test it
Hover your mouse pointer to see what phrases are coming out.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script> <script type="text/javascript"> $(function(){ $('.yellow_circle').mouseenter(function(){ $('.yellow_circle_word').text('The mouse pointer is in a yellow circle.'); }); $('.yellow_circle').mouseleave(function(){ $('.yellow_circle_word').text('The mouse pointer has left the yellow circle.'); }); }); </script> </head> <body> <div class="yellow_circle" style="width:40px;height:40px;border-radius:20px;background:yellow"></div> <p class="yellow_circle_word">test it.</p> </body> </html>
Here's the text() that I see for the first time. This function is used to change or get the text. ^-^
Don't bother. In this tutorial, you only need to look at mouseenter() and mouseleave().
mouseenter()과 mouseleave()를 함께 사용하는 hover()도 있습니다.
hover
How to use hover()
$('.class_Name').hover();
example
$('.class_Name').hover(function(){ $('.class_Name').css('border','5px solid blue'); }, function(){ $('.class_Name').css('border','5px solid red'); } );
그럼 실제 만들어 봅시다.
HTML
<div class="hover1"></div>
CSS
.hover1{width:100px; height:50px; background:yellow}
jQuery
var hover1 = $('.hover1'); hover1.hover(function(){ hover1.css('border','5px solid blue'); }, function(){ hover1.css('border','5px solid red'); });
Source
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>jQuery</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script> <script type="text/javascript"> $(function(){ var hover1 = $('.hover1'); hover1.hover(function(){ hover1.css('border','5px solid blue'); },function(){ hover1.css('border','5px solid red'); }); }); </script> <style> .hover1{width:100px; height:50px; background:yellow} </style> </head> <body> <div class="hover1"></div> </div> </body> </html>