Bug: map not removing hover class onMouseOver
See original GitHub issueHi again!
I managed to make my own implementation of a tooltip with styled-components
and was able to position it like so:
handleMove = ({ id }, e) => {
const tooltip = this.state.countries.find(({ code }) => code === id);
if (tooltip) {
const x = e.clientX;
const y = e.clientY + 25;
this.setState({ x, y, tooltip });
}
};
handleLeave = () => this.setState({ tooltip: null });
The weird behaviour started when, since the moment I implemented the onMouseMove
method, the map adds a class on hover to each path, but after leaving such path, the class does not get removed. So I end up having all the map with the hover color (which is darker) once I hovered over the whole map.
Is this a bug, something I am doing wrong? Is there an easy way without having to hack the map of removing that class?
Thanks in advance! ❤️
Issue Analytics
- State:
- Created 6 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
jquery - Why does .hover() not work on mapped images, but ...
Recently was working with image maps and trying to do something on hover of an image map. Naturally I tried .hover() first, but...
Read more >Moving the mouse: mouseover/out, mouseenter/leave
If we access event.relatedTarget.tagName , then there will be an error. Skipping elements. The mousemove event triggers when the mouse moves.
Read more >Block onMouseover (hover) popups - Google Groups
Is there a way to block mouseover (JavaScript) or hover (css) poups? I want to stop those annoying ads that are constantly popping...
Read more >onmouseover Event - W3Schools
The onmouseover event occurs when the mouse pointer enters an element. ... The difference is that the onmouseenter event does not bubble (does...
Read more >.hover() | jQuery API Documentation
The .hover() method binds handlers for both mouseenter and mouseleave events. ... Slide the next sibling LI up or down on hover, and...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
BTW this is a preview of the finished map, looks awesome! Huge thanks @zimrick and @zcreativelabs!!! 🎉
It will be one of the main features in the next release of the TMView website (any time beginning next year), an important website for trademarks of the EU. The map right know is prepared for being themable and has a nice zoom effect over every continent belonging to TMView! 🗺
Should be fixed in v0.8.1 (619fc1f0c1d961cf1636c4633f85456ab2b177df).