মাউস-ডাউন, মাউস-আপ এবং হোভার ইভেন্ট (Mousedown, Mouseup & Hover Event) : জে-কোয়েরী -(পর্ব-৩৫)

Leave a Comment / জে-কোয়েরী (jQuery) / By

মাউস-ডাউন(Mousedown) ইভেন্ট : যখন Mouse এর কোন Button (ডান অথবা বাম যেকোন Button হতে পারে) Press করা হয় , তখন Mousedown Event সংগঠিত হয় (Occurs when mouse button is pressed)।
মাউস-আপ (Mouseup) ইভেন্ট : যখন Mouse এর কোন Button (ডান অথবা বাম যেকোন Button হতে পারে) Press করে ছেড়ে দেয়া হয় , তখন Mouseup Event সংগঠিত হয় (Occurs when mouse button is released)।
হোভার(Hover) ইভেন্ট : যতক্ষন পর্যন্ত কোন element এর উপর Mouse অবস্থান করে ততক্ষন পর্যন্ত Hover event active থাকে (simply it apply behavior to an element during the time the mouse is within the element)।

Mousedown & Mouseup Example :

[sourcecode language=”html”]
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<style type="text/css">
#mouseup, #mousedown{
float:left;
padding:8px;
margin:8px;
border:1px solid red;
width:200px;
height:150px;
background-color:#999999;
}
</style>
</head>

<body>
<h1>jQuery mouseup() and mousedown() examples</h1>

<div id="mouseup">
<h3>mouseup</h3>
Fire when mouse over this element and released the mouse button.
</div>

<div id="mousedown">
<h3>mousedown</h3>
Fire when mouse over this element and pressed on the mouse button.
</div>

<script type="text/javascript">
$(‘#mouseup’).mouseup(function(){
$(‘#mouseup’).slideUp();
});

$(‘#mousedown’).mousedown(function(){
$(‘#mousedown’).fadeOut();
});
</script>

</body>
</html>
[/sourcecode]

Try Demo

Hover Example :

[sourcecode language=”html”]
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul { margin-left:20px; color:blue; }
li { cursor:default; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Chips</li>
<li>Socks</li>
</ul>
<script type="text/javascript">
$("li").hover(
function () {
$(this).append($("<span> ***</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
</script>

</body>
</html>
[/sourcecode]

Try Demo

………………………………………………………………………………
আলোকিত একটা সুন্দর সমৃদ্ধ পৃথিবী আমাদের প্রত্যেকেরই স্বপ্ন । আসুন আমাদের মেধা পরিশ্রম কে বিজ্ঞান সম্মতভাবে ব্যবহার করে, আমাদের স্বপ্ন পূরণে অংশ গ্রহণ করি। আজ এখানেই শেষ করলাম। “HAVE A GOOD PROGRAMMING”

জে-কোয়েরী ধারাবাহিক টিউটোরিয়ালঃ

Leave a Comment