Mouse Over: image on top stops hover effect

Getting Started
1

I have some circles with SVG images (logos) on top. Those circles should act as a link with a hover effect (revealing a short description).
Most of it is working fine, but the image on top of the circle knocks out the hover effect. So when I hover the circle the hover effect starts, but when the mouse is over the image it (logically) stops the effect.
But how can get my hover effect on the whole shape and not only in the visible part of it?

Attached is a simple demo.
Hover.zip (18.3 KB)

2

You should turn on “ignore all pointer events” this will stop the “logo” from acting on cursor events.

56F076DA-F97A-4786-A44B-F1E12FA7A295

1 Like
3

That was quick help! :slight_smile: Thanks.

That works. I think I can ignore old IE versions, but just out of curiosity is there another solution?

4

Not an easy solution and would require some kind of polyfill(s) or a lot of hacking. If old IE is of importance then I would design the UI differently to fit that browser after a check for which browser, as most times the old IE browsers may have a lot of things that may not work. Not impossible but I would way up the pros and cons.

1 Like
5

… ok, no IE is defiantly fine :slight_smile: I though it may work with two other clicks

Thanks for your help!