Menu
I have a grid of boxes that a user interacts with on a website. If they click a box, it changes color. There are quite a lot of boxes and I'd like it to be less tedious, so it would be nice to have the functionality be: if mouse button is down and you hover the box, it changes states. Any thoughts?
952
We can check if a mouse button is kept down by listening to the mousedown and mouseup events and mount how many times the mouse button is pressed down or lifted up.
You can simply use the CSS :hover pseudo-class selector in combination with the jQuery mousemove() to check whether the mouse is over an element or not in jQuery. The jQuery code in the following example will display a hint message on the web page when you place or remove the mouse pointer over the DIV element's box.
The mousedown event occurs when the left mouse button is pressed down over the selected element. The mousedown() method triggers the mousedown event, or attaches a function to run when a mousedown event occurs. Tip: This method is often used together with the mouseup() method.
You can use the buttons property on the event passed to the hover callback to check what mouse buttons were pressed when the event was triggered.
For example, to detect whether the left button was pressed when an element is entered with the mouse, you could use:
myElement.addEventListener("mouseover", function(e){
if(e.buttons == 1 || e.buttons == 3){
//do some stuff
}
})
Here is a demonstration of this idea: http://jsfiddle.net/Ah6pw/
Hold down the left mouse button and move your mouse through different list items.
124
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
