question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bug: map not removing hover class onMouseOver

See original GitHub issue

Hi 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:closed
  • Created 6 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
kutyelcommented, Aug 31, 2017

BTW this is a preview of the finished map, looks awesome! Huge thanks @zimrick and @zcreativelabs!!! 🎉

map-finished

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! 🗺

1reaction
zimrickcommented, Aug 30, 2017

Should be fixed in v0.8.1 (619fc1f0c1d961cf1636c4633f85456ab2b177df).

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found