Hover over part of a div


I am trying to create a hover effect using JQuery/JS.

I want to be able to execute my code when the user hovers over specific parts of the div.
For example this is the image:

This is inside a div and when I put the event listener on the div, it is executed when the mouse gets over it. But I want to able to execute it, only when I am inside the white border area.
I tried to make a clip path with CSS without luck.

Is there any way that I could make it?

If you can draw that shape in svg then you can attach an anchor to the shape and attach events and (hover effects) to it.

There was a recent thread here and look at #post 4 by @SamA74 which shows an svg circle.

I just forked his codepen and added an event listener on click to the red circle only. Just click the red circle. The white edges do not respond.

Of course that assumes you are able to draw your images in svg which might be difficult if they are not as straight forward as you have shown above.


great thanks!!

will check it right away

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.