milka milka - 3 months ago 36
Javascript Question

Show hidden image on mouseover

I have a problem when trying achieve hover effect on mapped image. I have an image with mapped areas and on all of them I want to show a different image when hover.

You can see my work so far here:

The problem is when I hover over area it show the image, but when I move the cursor (not leaving the area) it starts flickering. It takes area space pixel by pixel.

I've tried working with Javascript and jQuery solutions:


mouseenter="document.getElementById('Vilnius').style.display = 'block';" mouseleave="document.getElementById('Vilnius').style.display = 'none';"


}, 500);


There is a css property called "pointer-event" which gives the value "none" to the img tags that overlap in the mapped image and works as you need it. This is the documentation

The problem will always be the compatibility of browsers.