জেকুয়েরি mouseout() মেথড
সংজ্ঞা এবং ব্যবহার
নির্বাচিত এলিমেন্টের উপর থেকে মাউস পয়েন্টারকে সরিয়ে নিয়ে গেলে mouseout ইভেন্টটি ঘটে।
mouseout() মেথড mouseout ইভেন্ট ট্রিগার করে, অথবা mouseout ইভেন্ট ঘটলে রান করার জন্য একটি ফাংশন যুক্ত করে।
নোট: নির্বাচিত এলিমেন্ট এবং এর যেকোন চাইল্ড এলিমেন্টের উপর থেকে মাউস পয়েন্টারকে সরিয়ে নিয়ে গেলে mouseout ইভেন্টটি ঘটে। শুধুমাত্র নির্বাচিত এলিমেন্টের উপর থেকে মাউস পয়েন্টারকে সরিয়ে নিয়ে গেলে mouseleave ইভেন্টটি ঘটে। বুঝার স্বার্থে নিচের উদাহরণ দেখুন।
টিপস: এই ইভেন্টটি প্রায়ই mouseover ইভেন্টের সাথে একত্রে ব্যবহার করা হয়।
সিনট্যাক্স ও ব্যাখ্যা
নির্বাচিত এলিমেন্টের জন্য mouseout ইভেন্ট ট্রিগার:
$(selector).mouseout();প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে mouseout() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
| function | ঐচ্ছিক। mouseout ইভেন্ট সক্রিয় হলে যে ফাংশনটি রান হবে তা নির্দেশ করে। |
mouseout()মেথড সংক্রান্ত উদাহরণ
উদাহরণ
<!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").mouseover(function(){
$(this).css("color", "teal");
});
$("p").mouseout(function(){
$(this).css("color", "black");
});
});
</script>
</head>
<body>
<p>ইহা একটি প্যারাগ্রাফ।</p>
</body>
</html>ফলাফল
mouseout() and mouseleave() এর মধ্যে পার্থক্য
mouseout() and 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>ফলাফল