css 防止Edge在用户悬停在图像上时显示视觉搜索图标

wn9m85ua 于 2023-05-19 发布在其他

关注(0)|答案(5)|浏览(289)

Microsoft Edge最近为网页上超过一定大小的所有图像添加了一个新的悬停图标（视觉搜索）（它似乎显示了所有高于~ 180 px的图像）。
用户可以在Edge设置中删除它，但我正在寻找HTML/CSS中的解决方案，以防止在img标签上悬停时显示此图标。

图标是什么样子

悬停后图标

显示悬停行为的动画GIF

css

5条答案

尝试将pointer-events: none;用于图像

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

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

然后你可以把你需要的指针事件放在img-container div中，并使div和img的大小相等。
我遇到了同样的问题，真的希望有更好的解决方案。

我试着在我的图像上使用pointer-events：none，但它仍然在鼠标悬停时显示。我最终完全放弃了使用IMG标签，转而使用DIV容器，然后将图像作为背景图像加载。显然，背景图片不会触发视觉菜单。

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

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

现在有可以删除图标的浏览器设置。我无法通过密码解除它。我的图像是svg，所以这个功能根本不起作用！：）
要隐藏图标...在设置菜单中搜索“视觉搜索”（或设置>外观>视觉搜索）。有两个选项，一个是永久显示图标，另一个是悬停，然后用户也可以阻止它显示在选定的网站上。