জেকুয়েরি mouseleave() মেথড
সংজ্ঞা এবং ব্যবহার
নির্বাচিত এলিমেন্টের উপর থেকে মাউস পয়েন্টারকে সরিয়ে নিয়ে গেলে mouseleave ইভেন্টটি ঘটে।
mouseleave() মেথড mouseleave ইভেন্ট ট্রিগার করে, অথবা mouseleave ইভেন্ট ঘটলে রান করার জন্য একটি ফাংশন যুক্ত করে।
নোট: শুধুমাত্র নির্বাচিত এলিমেন্টের উপর থেকে মাউস পয়েন্টারকে সরিয়ে নিয়ে গেলে mouseleave ইভেন্টটি ঘটে। পাশাপাশি নির্বাচিত এলিমেন্টের যেকোন চাইল্ড এলিমেন্টের উপর থেকে মাউস পয়েন্টারকে সরিয়ে নিয়ে গেলে mouseleave ইভেন্টটি ঘটে। বুঝার স্বার্থে নিচের উদাহরণ দেখুন।
টিপস: এই ইভেন্টটি প্রায়ই mouseenter ইভেন্টের সাথে একত্রে ব্যবহার করা হয়।
সিনট্যাক্স ও ব্যাখ্যা
নির্বাচিত এলিমেন্টের জন্য mouseleave ইভেন্ট ট্রিগার:
$(selector).mouseleave()প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে mouseleave() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
| function | ঐচ্ছিক। mouseleave ইভেন্ট সক্রিয় হলে যে ফাংশনটি রান হবে তা নির্দেশ করে। |
mouseleave()মেথড সংক্রান্ত উদাহরণ
মাউস পয়েন্টার <p> এলিমেন্টের উপর থেকে সরিয়ে নিলে টেক্সট কালার ধূসর হবে:
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).css("color", "red");
});
$("p").mouseleave(function(){
$(this).css("color", "lightgrey");
});
});
</script>
</head>
<body>
<p>ইহা একটি প্যারাগ্রাফ।</p>
</body>
</html>ফলাফল
mouseout() এবং mouseleave() এর মধ্যে পার্থক্য
mouseout() এবং mouseleave() এর মধ্যে পার্থক্যের বর্ণনা:
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var a = 0;
var b = 0;
$(document).ready(function(){
$("div#mouseout").mouseout(function(){
$("#mouseout span").text(a += 1);
});
$("div#mouseleave").mouseleave(function(){
$("#mouseleave span").text(b += 1);
});
});
</script>
</head>
<body>
<div id="mouseout" style="background-color:lightgray;padding:20px;width:150px;float:left">
<h3 style="background-color:white;">মাউস আউট ইভেন্ট ট্রিগার হয়েছে: <span></span></h3>
</div>
<div id="mouseleave" style="background-color:lightgray;padding:20px;width:150px;float:right">
<h3 style="background-color:white;">মাউস লিভ ইভেন্ট ট্রিগার হয়েছে: <span></span></h3>
</div>
</body>
</html>ফলাফল