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>