Reputation: 938
Ok so i have a grid of divs as shown below:
<div class="check1"></div>
<div class="check1"></div><div style="clear:both;"></div>
<div class="check1"></div>
<div class="check1"></div>
In my jquery i check if one of the div's have been clicked using:
$('.check1').mousedown(function(){
$(this).css('background-color','blue');
});
What i would like to do is if a div is cliced and held down but the cursor moves over another div i would also like that div to change color. I tried this example but the mouseover event is called regardless if the mouse down event has been called.
$('.check1').mousedown(function(){
$(this).css('background-color','blue');
$('.check1').mouseover(function(){
$(this).css('background-color', 'blue');
});
});
Is this possible and if so what am I doing wrong / what do i need to change?
Upvotes: 1
Views: 113
Reputation: 6996
You could use a simple flag
concept
Code:
var flag = 0;
$('.check1').mousedown(function () {
$(this).css('background-color', 'blue');
flag = 1;
}).mouseup(function () {
flag = 0;
}).mouseover(function () {
if (flag) {
$(this).css('background-color', 'blue');
}
});
Upvotes: 5
Reputation: 4994
The shortest way:)
$('.check1').on('mouseover mousedown', function(e){
if (e.which == 1){
$(this).css('background-color', 'blue');
}
});
Upvotes: 2
Reputation: 136239
You have simply forgotten to unbind the mouseover
event.
$('.check1').mousedown(function(){
$(this).css('background-color', 'blue')
$('.check1').on('mouseover',function(){
$(this).css('background-color', 'blue')
});
$(document).mouseup(function(){
$('.check1').off('mouseover');
});
});
Live example: http://jsfiddle.net/vREzg/
Upvotes: 0
Reputation: 88
Try this :
$('.check1').mousedown(function(){
$(this).css({'background-color','blue'});
$(this).bind('mouseover', function(){
$(this).css({'background-color':'blue'});
}).bind('mouseout', function(){
$(this).css({'background-color':'green'});
});
});
Upvotes: 0