How do I prevent Edge from showing the visual search icon when users hover over an image?

user_8730274 0
Viewed 1222

Microsoft Edge (v100.0.1185.29) seems to have recently added a new hover icon(visual search) to all images over a certain size on a webpage. This option is also on the context menu anyway grrr!

I know 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 tag?

This is the icon

This is the icon

Which expands like so when you hover

icon expanded on hover

I've tried different img width, heights and position settings. It seems to stop showing below 180px.

enter image description here

css html
4 Answers

Try to use pointer-events: none; for image

user_190168300

There are now browser settings which can remove the icons. I wasn't able to disable it via the code. My images are svg so the feature doesn't even work anyway! : )

To hide the icons... search "visual search" in the settings menu (or settings > appearance > visual search). 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. enter image description here

user_172370120

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!

user_87302740

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.

user_104541560
Related