Question

我在prety common sitiation中选择元素时遇到了问题。

假设我们有一个页面。弹出窗口包括全屏幕背景（色调），可滚动对话框以及背景角处的固定关闭按钮。

我正在尝试实现的行为是在鼠标悬停在背景上但不是通过对话框时突出显示关闭按钮。

这种结构很容易完成：

<div class="page"/>
<div class="background"> // position:fixed; overflow: auto;
    <div class="popup"/>
    <div class="close-button"/> // position: fixed opacity: 0.6;
</div>

CSS选择器将是：

.background:hover .popup:not(:hover) + .close-button {
    opacity: 1;
}

但后来我发现了一个错误：在iOS设备上，当-webkit-overflow-scrolling：touch设置为使弹出窗口平滑滚动并且有惯性（默认ios滚动），关闭按钮有位置：固定，开始上下跳动试图补偿滚动延迟

唯一的解决方案是在背景之外移动关闭按钮（旁边）

<div class="page"/>
<div class="background"> // position:fixed; overflow: auto;
    <div class="popup"/>
</div>
<div class="closee-button"/> // position: fixed

但是我无法为这个结构创建正确的CSS选择器，它将包括背景，弹出和关闭按钮。

CSS弹出窗口，棘手的目标

0 个答案: