Reputation: 219

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

Microsoft Edge have recently added a new hover icon (visual search) to all images over a certain size on a webpage (it seems to show for all images above ~180px).

The user can remove it in Edge settings, but I'm looking for a solution in HTML/CSS to prevent this icon from showing when hovering over an img tag.

What the icon looks like

Icon after hover

icon expanded on hover

An animated GIF showing the hover behavior

Upvotes: 25

Answers (9)

AmateurD

Reputation: 71

Adding the attribute "inert" to the image prevents Edge showing the button completely but the image still displays and prints. You can wrap this with an link and a to get images to work as links.

<a href="www.bing.com" target="_top">
  <div>
    <img inert src="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png">
  </div>
</a>

Upvotes: 1

İkranur Akdoğan

Reputation: 1

If you do not want the visual search to appear and want to the hover feature to not disappear when the icon is clicked, you can use pointerEvents: “hover” instead of pointerEvents: “none”.

Example:

<img style {{ pointerEvents: “hover”, cursor:”pointer”}} src=.. />

Upvotes: 0

Gilles van der Meij

Reputation: 1

I have set the image z-index to -1. (The div around the image should be position: relative but with Elementor this step is not needed) I have just checked this in WordPress with Elementor and this works well. The image will not be clickable anymore and the icon is gone. If your image has a link then you can not use this feature.

Upvotes: 0

Mike McCollister

Reputation: 139

I have tried "setting the background-image in the style" method, and it works, but I find that the image does not print unless the print background graphics setting under more settings is checked.

<DIV style = 'background-image:url("path to image"); background-size:100% 100%;'></DIV>

I fooled around a bit and tried to have two images, one to print and one for the screen, but that seemed too much.

So, I have found a way that will show the image on the screen and printing using this method. This is for an image that is 200x100 pixels.

<IMG src="#" style='content:url("path to image")' width='200' height='100' alt='Alternate text' title='Some sort of title'>

Now I have images that show without that stupid visual search icon on Microsoft Edge.

Note src="#" added to make it valid HTML. Or, you can add src="data:,". Your choice.

Upvotes: 0

Peta Stewart

Reputation: 47

Now there are browser settings which can remove the icons.

To hide the icons:

Type the URL edge://settings/appearance/hoverMenu
or Settings > Appearance > Visual search
or search "visual search" in the settings menu

There are two options, one which shows the icons permanently and the other on hover and then users can also prevent it from showing on selected sites.

I wasn't able to disable it via the code. My images are svg so the feature doesn't even work anyway! 🙂

Upvotes: 2

Derrick Bouchard

Reputation: 90

I tried using pointer-events:none on my image, but it still kept showing up on mouse hover. I eventually gave up using the IMG tag altogether, and used a DIV container instead, and then loaded the image as a background image. Apparently, background images don't trigger the visual menu.

<DIV style = 'background-image:url("path to image"); background-size:100% 100%;'>
</DIV>

Upvotes: 4

Franklin Kelly

Reputation: 83

Unfortunately the best way to fix this issue is to do something like the following:

<style>
    .no-visual-search {
        pointer-events: none;
    }
</style>
<div class='img-container'>
    <img class='no-visual-search'>
</div>

Then you can place your pointer-events that you need in the img-container div, and make the sizes of the div and the img equal.

I ran into the same problem and really wish there was a better solution.

Upvotes: 6

JayTruman

Reputation: 219

Looks like Microsoft have learnt the error of their ways as now they have either removed this 'feature' or set it to off by default. I can't find any settings for it so I assume it's been removed... for now!

Upvotes: -2

Igor Ponomarenko

Reputation: 181

Try to use pointer-events: none; for image

Upvotes: 18

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

Answers (9)

Related Questions