মাউস-ডাউন, মাউস-আপ এবং হোভার ইভেন্ট

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

মাউস-ডাউন(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 :

<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>

Demo :

Hover Example :

<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>

Demo :

<< Previous Next >>

লেখকঃ ঢাকা প্রকৌশল ও প্রযুক্তি বিশ্ববিদ্যায়ের(DUET) কম্পিউটার সায়েন্স এ্যান্ড ইঞ্জিনিয়ারিং(CSE) বিভাগের ৪র্থ বর্ষের এক জন ছাত্র। তিনি ওয়েব ডিজাইন, ওয়েব ডেভলপমেন্ট এর বিভিন্ন বিষয় যেমন : এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট, জে কোয়েরি, পিএইচপি, .Net ইত্যাদি বিষয়ের উপর অভিজ্ঞ। তিনি ACM ICPC সহ বিভিন্ন আন্তর্জাতিক প্রোগ্রামিং প্রতিযোগীতায় অংশগ্রহন করেছেন। তাকে ফেসবুকে অনুসরন করতে এখানে ক্লিক করুন।