IE11 不会丢弃：鼠标离开时悬停引导按钮

编程问答 2022-05-21

问题描述

我们的客户提出了一个“错误”。该错误是关于即使将指针移到外部后，一个按钮仍停留在蓝色背景（悬停）。

我在本地创建了一个 MWE 并将其移至 Stackblitz（抱歉，不适用于 IE，哈哈）。

我还添加了指向 YouTube 视频的链接以显示问题，因为事实证明您很难重现它。

要在本地复制，只需创建一个新的 Angular 项目 ng add @ng-bootstrap/ng-bootstrap。

角 11， "@ng-bootstrap/ng-bootstrap": "^9.0.2","bootstrap": "^4.6.0",

这是视图app.component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
  toggle: boolean;
}

这是视图app.component.html：

<div [ngSwitch]="toggle">
    <button *ngSwitchCase="true" type="button" class="btn btn-primary" (click)="toggle = !toggle" ngbPopover="You see,I show up on hover1!" placement="right" triggers="mouseenter:mouseleave">Primary1</button>
    <button *ngSwitchDefault type="button" class="btn btn-outline-primary" (click)="toggle = !toggle" ngbPopover="You see,I show up on hover2!" placement="right" triggers="mouseenter:mouseleave">Primary2</button>
</div>

要点：

  • 有两个按钮
  • 点击按钮 1 将隐藏，按钮 2 将显示
  • 点击按钮 2 将被隐藏，按钮 1 将被显示
  • 按钮 1 和按钮 2 具有不同的引导程序样式，使事情变得简单
  • 两个按钮都在悬停时显示工具提示，离开时关闭它们

如何复制：

  • 点击按钮
  • 点击后立即在工具提示上移动鼠标（但你需要非常非常快）

效果：

  • 按钮 1 被隐藏（从 DOM 中移除），
  • 显示按钮 2（添加到 DOM），
  • 按钮 2 未悬停，
  • 工具提示已关闭
  • IE 仍然 应用.btn-outline-primary:hover，即使按钮没有悬停，
  • 将鼠标悬停在按钮上并将指针移出可解决此问题 - IE 将按预期应用 .btn-outline-primary。

enter image description here

enter image description here

enter image description here

我们怎么想？添加按钮 2 后的 IE 不知道用户已经将光标移出（因此 IE“认为”没有更改悬停状态，因此它保持 :hover 样式但按钮不同）。但是 mouseleave 和 mouSEOut 是为新按钮触发的。

经过多次尝试，我们无法在 Chrome 上重现。

我们的尝试：

  • 我们禁用了转换 - 默认情况下，Chrome 正在添加 prefers-reduced-motion 媒体查询，不支持 IE。固定闪烁效果但悬停问题仍然存在。
  • 我们尝试将按钮与组件分开并调用 detectChanges with/without setTimeout 让 IE“重新思考”情况，然后使用适当的样式重新呈现按钮 - 没有帮助
  • 最终我添加了一个这样的开关：
    <div [ngSwitch]="forceRefresh">
        <div *ngSwitchCase="true">...</div>
        <div *ngSwitchDefault>...</div>
    </div>

并且我将 forceRefresh 中的 false 值从 true 更改为 setTimeout 以强制 IE 认为它必须呈现完全不同的 DOM（两种情况都呈现相同的按钮） .成功了。

我想知道有没有更优雅的方法来解决这个 IE 特定的问题？

注意：在我们的项目中，即使在移除工具顶后也会发生这种情况，所以我怀疑它与 Bootstrap popovers 相关。我认为它可以通过只保留一个按钮来轻松修复，但是我们将不得不为这样一个按钮的每个属性应用许多条件表达式。使用 ng-templates 对按钮进行分组更可取。

视频（来自家庭、MWE、Chrome、IE11、Edge）：https://www.youtube.com/watch?v=oeG-11TzS-Q

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularhoverinternet-explorer-11ng-bootstrap