当用户将鼠标悬停在图像上时，防止 Edge 显示视觉搜索图标

Question

Microsoft Edge 最近为网页上超过一定尺寸的所有图像添加了一个新的悬停图标（视觉搜索）（似乎对高于 ~180px 的所有图像都显示）。

用户可以在 Edge 设置中将其删除，但我正在寻找 HTML/CSS 中的解决方案，以防止将鼠标悬停在 img 标签上时显示此图标。

图标是什么样的

悬停后的图标

显示悬停行为的 GIF 动画

Answer 1

尝试使用

pointer-events: none;

作为图像

Answer 2

不幸的是，解决此问题的最佳方法是执行以下操作：

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

然后你可以将你需要的指针事件放在

img-container

div 中，并使 div 和 img 的大小相等。

我遇到了同样的问题，真的希望有更好的解决方案。

Answer 3

我尝试在图像上使用指针事件：无，但它仍然在鼠标悬停时显示。我最终完全放弃使用IMG标签，而是使用DIV容器，然后加载图像作为背景图像。显然，背景图像不会触发视觉菜单。

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

Answer 4

现在有浏览器设置可以删除图标。

隐藏图标：

• 输入网址

  edge://settings/appearance/hoverMenu

• 或 设置 > 外观 > 视觉搜索
• 或在设置菜单中搜索“视觉搜索”

有两种选择，一是 永久显示图标，悬停时显示另一个图标，然后 用户还可以阻止它在选定的网站上显示。

我无法通过代码禁用它。我的图像是 svg，所以该功能无论如何都不起作用！ 🙂

Answer 5

我尝试过“在样式中设置背景图像”的方法，它有效，但我发现除非选中更多设置下的打印背景图形设置，否则图像不会打印。

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

我找到了一种方法，可以在屏幕上显示图像并使用这种方法进行打印。

<DIV style='content:url("path to image")'>

现在我在 Microsoft Edge 上显示的图像没有那个愚蠢的视觉搜索图标。

Answer 6

看起来微软已经认识到了他们的方法的错误，因为现在他们要么删除了这个“功能”，要么默认将其设置为关闭。我找不到它的任何设置，所以我假设它已被删除......现在！