জেকুয়েরি mouseover() মেথড
সংজ্ঞা এবং ব্যবহার
নির্বাচিত এলিমেন্টের উপরে মাউস পয়েন্টারকে নিয়ে গেলে mouseover ইভেন্টটি ঘটে।
mouseover() মেথড mouseover ইভেন্ট ট্রিগার করে, অথবা mouseover ইভেন্ট ঘটলে রান করার জন্য একটি ফাংশন যুক্ত করে।
নোট: নির্বাচিত এলিমেন্ট ও এর কোন চাইল্ড এলিমেন্টের উপরেও মাউস পয়েন্টার নিয়ে গেলে mouseover ইভেন্ট ঘটে। শুধুমাত্র নির্বাচিত এলিমেন্টের উপর মাউস নিলেই mouseenter ইভেন্ট ঘটে। বুঝার স্বার্থে নিচের উদাহরণে দেখুন।
টিপস: এই ইভেন্টটি প্রায়ই mouseout ইভেন্টের সাথে একত্রে ব্যবহার করা হয়।
সিনট্যাক্স ও ব্যাখ্যা
নির্বাচিত এলিমেন্টের জন্য mouseover ইভেন্ট ট্রিগার:
$(selector).mouseover();প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে mouseover() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
| function | ঐচ্ছিক। mouseover ইভেন্ট সক্রিয় হলে যে ফাংশনটি রান হবে তা নির্দেশ করে। |
mouseover()মেথড সংক্রান্ত উদাহরণ
উদাহরণ
<!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>ফলাফল
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>ফলাফল