Question 305370 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – onmouseover event suddenly not working in Edge browser

I have the following code throughout my site to swap images on hover:

<img class="rounded-lg object-cover shadow-lg transition hover:scale-[1.05]"
src="/assets/profiles/leadership/volker-photo-detail-hover.png"
onmouseover="this.src='/assets/profiles/leadership/volker-photo-detail-hover.png';"
onmouseout="this.src='/assets/profiles/leadership/volker-photo-detail.png';">

which has been working fine for the last year, but suddenly it won’t work correctly in Microsoft Edge browser. It works fine in Chrome and Firefox. You can test here: https://jwmdrc.org/ (work in progress so not really accessible on smaller screens/mobiles yet) in different browsers and see that it’s only Edge that is affected.

Maybe this is due to a recent update? Has anyone else encountered this and/or know of a solution?

Thanks

Edit: built with Statamic and Tailwind

Tags:

2

Answers


  1. 0

    Use "mouseover" Instead of "onmouseover".

    Login or Signup to reply.
  2. 0

    Conflict with Edge Visual Search

    The problem is caused by an Edge feature called "Visual Search" that adds a search icon to images on hover.

    Hover Problem

    The problem can be reproduced by visiting the site and moving the mouse across an image link. The image changes on hover, but does not change back to the original image after the mouse leaves.

    To reproduce the problem,

    Now open Edge settings and type "Visual Search". Expand the "Hover menu" section and disable "Show hover menu on image hover". When retesting the hover link, it now works as expected and like other browsers.

    Edge Settings

    enter image description here

    If you can’t find the setting, because you’re using another language, visit edge://settings/appearance/hoverMenu and uncheck the first option.

    I was not able to reproduced the problem in a snippet, probably because Visual Search doesn’t work within an iframe. There also does not appear to be a way to disable this feature programmatically on a page or specific images.

    Related question:

    Preventing Edge from showing the visual search icon when users hover over an image

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search