Css 在设备模式下，在FireFox中悬停不工作

我有一个图像，当你将鼠标悬停在上面时，会出现一些文本。这适用于桌面上的Chrome和FireFox。但在FireFox中，当我在响应设计模式下选择iPhone这样的设备时，悬停突然不再起作用，但在Chrome中，当我在同一台设备上进行测试时，悬停是正常的

.campaigns-container:hover .overlay {
    opacity: 0.9;
}

我是否需要为设备添加一些内容

<mat-card class="campaigns-container">
    <img
        class="campaign-image"
        mat-card-image
        src="{{ campaignImageSource }}"
    />
    <div
        class="overlay overlay-fade">
        <div class="fx-align-space-evenly-center">
            <div class="campaign-question m-6 fx-flex-50">
                <h2 class="mat-caption">
                    {{ informationStrings['question'] }}
                </h2>
            </div>
        </div>
    </div>
</mat-card>

{{informationStrings['question']}

默认情况下，当您选择iPhone时，Firefox将模拟触摸模式，

：hover

不工作

您可以使用工具栏上最右边的按钮将其关闭

---

您不能在触摸设备上悬停。您是否在FireFox中启用了触摸选项，但在Chrome中没有启用？@DanMullin是的，在设备上我必须单击才能显示文本，但我没有为此添加任何额外的代码，当我单击Chrome时，触摸选项可以工作，但在FireFox中没有。是的，我可以关闭触摸选项并再次悬停，但我需要测试设备上的触摸功能。触摸在Chrome中工作（我没有添加任何东西使触摸工作），但在FireFox中不工作。我需要为FireFox上的touch添加一些额外的东西吗？