jQuery mousedown/up Example

Here is a simple example of the jQuery event handler .mousedown() and .mouseup().

by Colin Soderstrom

HTML

<p>Click and hold the button below and the red box will turn green during the mouse down portion of the click!</p>
<div id="clckDwn"><p>Click Here</p></div>
<div id="clrChng" class="red"><p>Not Clicked</p></div>

CSS

p {
    font-family: arial;
}
#clckDwn {
    background-color: gray;
    text-align: center;
    cursor: pointer;
    border-radius: 3px;
}
#clckDwn p, #clrChng p{
    padding: 10px;
    color: white;
}
#clrChng {
    border-radius: 3px;
    text-align: center;
    height: 80px;
}
.red {
    background-color: red;
}
.green {
    background-color: green;
}

JavaScript

$(document).ready(function() {
    $('#clckDwn').mousedown(function() {
        $('.red').attr('class', 'green');
        $('.green p').text('Mouse Down');
    });
    $('#clckDwn').mouseup(function() {
        $('.green').attr('class', 'red');
        $('.red p').text('Not Clicked');
    });
});