Magento 2 Product Image Zoom Issue – Fix Overlap with Drop-Down Menu

less-cssmagento2zoom

Zoom works fine,

But when hovering on category drop-down menu to the overlap area of product image and drop-down menu, The zoom is acting normally, even the mouse is still on the drop-down menu.

Please check the capture picture:

enter image description here

Best Answer

You need to replace the code of lib/web/magnifier/magnifier.js in your theme as below.

$(document).on('mousemove', onMousemove);
_init($box, gOptions);

Replace it With.

$box.on('mousemove', onMousemove);
$box.on('mouseleave', mouseleave);
function mouseleave(e) {
   onThumbLeave();
   isOverThumb = false;
   $largeWrapper.addClass(MagnifyCls.magnifyHidden);
}
_init($box, gOptions);

We need to add function on "mouseleave" event of image block otherwise zoom will display after mouse leave from image block.
Please add the above code and let me know if you need anything else.

Related Topic