জেকুয়েরি mouseenter() মেথড
সংজ্ঞা এবং ব্যবহার
নির্বাচিত এলিমেন্টের উপরে মাউস পয়েন্টারকে নিয়ে গেলে mouseenter ইভেন্টটি ঘটে।
mouseenter() মেথড mouseenter ইভেন্ট ট্রিগার করে, অথবা mouseenter ইভেন্ট ঘটলে রান করার জন্য একটি ফাংশন যুক্ত করে।
নোট: শুধুমাত্র নির্বাচিত এলিমেন্টের উপর মাউস নিলেই mouseenter ইভেন্ট ঘটে। পাশাপাশি নির্বাচিত এলিমেন্টের কোন চাইল্ড এলিমেন্টের উপরেও মাউস পয়েন্টার নিয়ে গেলে mouseover ইভেন্ট ঘটবে। বুঝার স্বার্থে নিচের উদাহরণ দেখুন।
টিপস: এই ইভেন্টটি প্রায়ই mouseleave ইভেন্টের সাথে একত্রে ব্যবহার করা হয়।
সিনট্যাক্স ও ব্যাখ্যা
নির্বাচিত এলিমেন্টের জন্য mouseenter ইভেন্ট ট্রিগার:
$(selector).mouseenter();প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে mouseenter() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
| function | ঐচ্ছিক। mouseenter ইভেন্ট সক্রিয় হলে যে ফাংশনটি রান হবে তা নির্দেশ করে। |
উদাহরণ
<!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(){
$("p").css("background-color", "yellow");
});
$("p").mouseleave(function(){
$("p").css("background-color", "white");
});
});
</script>
</head>
<body>
<p>ইহা একটি প্যারাগ্রাফ।</p>
</body>
</html>ফলাফল
mouseenter(), mouseover() এবং mousemove() এর মধ্যে পার্থক্য
mouseenter(), mouseover() এবং mousemove() এর মধ্যে পার্থক্যের বর্ণনা:
উদাহরণ
<!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;
var c = 0;
$(document).ready(function(){
$("div#mouseover").mouseover(function(){
$("#mouseover span").text(a += 1);
});
$("div#mouseenter").mouseenter(function(){
$("#mouseenter span").text(b += 1);
});
$("div#mousemove").mousemove(function(){
$("#mousemove span").text(c += 1);
});
});
</script>
</head>
<body>
<div id="mouseover">
<h4>মাউস ওভার ইভেন্ট ট্রিগার করা হয়েছে: <span></span></h4>
</div>
<div id="mouseenter">
<h4>মাউস এন্টার ইভেন্ট ট্রিগার করা হয়েছে: <span></span></h4>
</div>
<div id="mousemove">
<h4>মাউস মুভ ইভেন্ট ট্রিগার করা হয়েছে: <span></span></h4>
</div>
</body>
</html>ফলাফল