So if you attach some function on the hover event it won't fire if the mouse is already within th hovering area during page load, and is not moved. You actually have to move the mouse a bit to the event to fire.
Example:
move the mouse to the hover-effect area
hit the mouse with an axe
reload the page with F5
=> hover function not fired :(
Why?
And is there a fix?
This is expected functionality, hover is simply the combination of "mouseOver" and "mouseOut" so if your cursor is over the element on page load, it never technically moves over the element. Unfortunately without a mouse move, there is no way for the javascript to determine the position of the mouse, or the element it is currently over.
Related
I use LocoScroll to achieve a horizontal scroll.
On my page I also have a mouseover event that i used to show images.
The problem is that my images doesn't change on scroll, and i want to see the images shift as the user scroll through the page. I tried to insert my mouseover function inside locoScroll.on('scroll', (instance) => {}); But it don't seems to be the right direction.
You can find my code here :
https://codepen.io/acds/pen/MWrNeZQ
I'm trying to implement system-wide drag operation with middle mouse button. It should override middle mouse drag behavior in other programs. Currently, I am handling global mouse events with system-wide hooks.
Problem is - many programs still receive and handle same events like I did not intercept them.
Here's what I tried:
not call the next hook for mouse down event: I never receive mouse up, so I don't know where and when to stop dragging
not call the next hook for mouse move: cursor slows down tremendously
not call the next hook for mouse up: most windows in the system stop reacting to mouse events completely after my drag is finished
always call the next hook in the chain: if the control under mouse has scroll in it, most of the time it will be scrolling while my drag is in progress. Also UWP apps continue receiving mouse events during my drag, so if a link in MS Edge happens to be under cursor when it started, and mouse does not leave Edge boundary, Edge receives click event, and new tab is opened
What I need is: when user holds middle mouse and starts dragging, my drag handler should be called, and no other handlers, like file drag, scroll, etc should happen.
I ended up with somewhat hacky solution:
do not call the next hook for mouse down for middle button
record where it was pressed
when handling mouse up, if user did not drag - replay the whole mouse up + mouse down using SendInput from a separate thread (to avoid deadlock due to reentrancy)
I have an issue with svg groups and basic animation. this guy is a button. When hovered over, out pops a sort of menu. The goal is that the menu retracts when the mouse pointer leaves the button and the menu.
The trouble starts with 'onmouseout'; even though button & menu are grouped, and with 'onmouseout' acting on the whole group, the mouseout action is triggered by mousing out ANY element within the group. So a move from button to menu triggers the retraction.
To work around this I've put a mask over the top that appears (so to speak - it does become visible but has 0 opacity, so cannot be seen), when the button is moused over. I've turned it grey here so you can see it. But if i want to add element onto this menu, I'm no further forward than before. The red block is this other element.
Seemingly, if I had the menu just appear instead of using animations to make them appear, the groups would behave as I want them to.
I hope someone can help or shed some light.
When you push down the left mouse button mouse down event fires. If you then move the mouse over a label (while holding the mouse button down) mouse over event does not fire.
Is there any way to enable this events or fire them manualy or simulate them?
What you are actually doing is two separate events, one is a mouse down event as you have described and the other is a mouse drag.
If you want to simulate them, that you might have to consider using a mouse click to track the user's (x,y) location. Subsequently, if you want to "simulate" it you could do some computation and decide for yourself if it is indeed a mouse click or mouse drag event that has occurred.
Hope it helps :) Cheers!
Obviously you dont have a mouse over effect on a touchscreen, but I would like some effect, maybe onclick? Does anybody have any suggestions?
On the touchscreen I'm working with right now, the mouse over is a persistent effect of clicks. In other words, it's as if after clicking an item with an actual mouse and releasing the button, one never moved the mouse pointer afterwards.