Love beautiful code? We do too.

  1. Home
  2. Tutorial
  3. Hàm jQuery
  4. .mouseenter() trong jQuery
Previous Lesson Next Lesson

.mouseenter() trong jQuery

Định nghĩa và sử dụng .mouseenter() trong jQuery

.mouseenter(): Ràng buộc một xử lý tới một sự kiện mouseenter (di chuyển chuột vào thành phần), hoặc kích hoạt sự kiện mouseenter lên một thành phần.

Khác biệt giữa mouseenter và mouseover là:

  • .mouseenter(): Khi di chuyển chuột vào thành phần có thành phần con, nếu chưa thoát khỏi thành phần cha thì vẫn được hiểu là đang ở thành phần cha.
  • .mouseover(): Khi di chuyển chuột lên trên thành phần có thành phần con, mặc dù vẫn trong thành phần cha, nhưng nếu di duyển chuột lên thành phần con thì được tính như là đã thoát khỏi thành phần cha.

Cấu trúc .mouseenter() trong jQuery

Đã được thêm vào từ phiên bản 1.0

.mouseenter()

$('img').mouseenter();
.mouseenter(function(){...})

$('img').mouseenter(function(){
    alert('Bạn vừa di chuyển chuột');
});

.mouseenter()

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('img').mouseenter(function(){
        $(this).css('border','5px solid green');
    });
    $('button').click(function(){
        $('img').mouseenter()
    });
});
</script>
</head>

<body>
<img src="https://hoclaptrinh.vn/themes/client/img/code-screen.jpg" alt="" />
<button>Click</button>
</body>
</html>

Hiển thị trình duyệt:

Khi click vào button, ta đã kích hoạt được giá trị mouseenter vào , giống như vừa di chuyển chuột vào .

.mouseenter(function(){...})

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('img').mouseenter(function(){
        $(this).css('border','5px solid green');
    });
});
</script>
</head>

<body>
<img src="https://hoclaptrinh.vn/themes/client/img/code-screen.jpg" alt="" />
</body>
</html>

Hiển thị trình duyệt:

Khi di chuyển chuột vào <img /> ta sẽ thấy được kết qủa.

Previous Lesson Next Lesson

Viết câu trả lời

Drop Images

0 Bình luận

Danh mục bài học

Hoclaptrinh.vn © 2017

From Coder With