我在我的网站上有以下代码,用于在悬停时交换图像:

<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';">

go 年一直运行良好,但突然在微软Edge浏览器中无法正常工作.它在Chrome和Firefox中运行良好.你可以在这里测试:https://jwmdrc.org/(正在进行中,因此在较小的屏幕/手机上还不能真正访问)在不同的浏览器中,并看到只有边缘受到影响.

这可能是由于最近的更新.有没有其他人遇到过这种情况或知道解决方案?

谢谢

编辑:使用Statama和TailWind构建

推荐答案

Conflict with Edge Visual Search

这个问题是由一项名为"视觉搜索"的Edge功能引起的,该功能会在悬停的图像上添加一个搜索图标.

Hover Problem

这个问题可以通过访问site并在图像链接上移动鼠标来重现.图像在悬停时更改,但在鼠标离开后不会更改回原始图像.

To reproduce the problem,

现在打开边缘设置,输入"视觉搜索".展开"悬停菜单"部分并禁用"在图像悬停时显示悬停菜单".当重新测试悬停链接时,它现在可以像其他浏览器一样正常工作.

Edge Settings

enter image description here

如果您因为使用另一种语言而找不到设置,请访问edge://settings/appearance/hoverMenu并取消选中第一个选项.

我无法在代码片段中重现该问题,可能是因为视觉搜索在IFRAME中不起作用.似乎也没有办法以编程方式在页面或特定图像上禁用此功能.

Related question:

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

Javascript相关问答推荐

如何解决chrome—extension代码中的错误,它会实时覆盖google—meet的面部图像?'

成功完成Reducers后不更新状态

MathJax可以导入本地HTML文档使用的JS文件吗?

将核心模块导入另一个组件模块时存在多个主题

JS:XML insertBefore插入元素

当输入字段无效时,我的应用程序不会返回错误

查询参数未在我的Next.js应用路由接口中定义

使用getBorbingClientRect()更改绝对元素位置

如何使用JS创建一个明暗功能按钮?

为列表中的项目设置动画

使用RxJS from Event和@ViewChild vs KeyUp事件和RxJS主题更改输入字段值

将相关数据组合到两个不同的数组中

判断函数参数的类型

如何在AG-Grid文本字段中创建占位符

递增/递减按钮React.js/Redux

输入数据覆盖JSON文件

更改管线时不渲染组件的react

CSS网格使页面自动滚动

带有JS模块模式的Rails的Importmap错误:";Net::ERR_ABORTED 404(未找到)&Quot;

鼠标进入,每秒将图像大小减小5%