Popover打开时如何为触发元素设置样式并禁用交互？

当使用HTML Popover API时，要实现popover打开时触发元素固定位置且无法交互的需求，核心是利用:has()选择器关联触发元素与popover的状态，而非直接使用::popover-open（该伪类仅作用于popover自身）。以下是两种可行的嵌套CSS写法，以及关键注意点：

可行方案1：外部关联式嵌套写法 #

直接通过:has()检测触发元素的相邻popover是否处于打开状态，为触发元素设置目标样式：

/* 触发元素默认样式 */
.popover-trigger {
  padding: 8px 16px;
  background: #eee;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Popover打开时的触发元素样式 */
.popover-trigger:has(+ [popover]:open) {
  position: relative; /* 固定位置，避免布局移位 */
  pointer-events: none; /* 彻底禁用hover/click等交互 */
  opacity: 0.7; /* 视觉反馈：标识当前不可交互 */
  cursor: not-allowed;
}

/* Popover基础样式 */
[popover] {
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

可行方案2：内部&引用嵌套写法 #

如果习惯在触发元素的CSS块内嵌套状态样式，可以用&引用父选择器，结合:has()实现：

.popover-trigger {
  padding: 8px 16px;
  background: #eee;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  /* Popover打开时的状态样式 */
  &:has(+ [popover]:open) {
    position: sticky; /* 根据布局需求选择position值 */
    pointer-events: none;
    user-select: none; /* 可选：禁止文字选中 */
    opacity: 0.7;
  }
}

[popover] {
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

关键说明 #

• 为什么不用::popover-open？该伪类仅能选中popover元素本身，无法直接关联到触发元素，因此需要通过:has()建立触发元素与popover状态的关联。
• pointer-events: none是禁用交互的核心属性，它会让触发元素忽略所有鼠标事件（包括hover），比仅设置cursor: not-allowed更彻底。
• 位置保持：根据布局需求选择position: relative/sticky/fixed，确保popover弹出时触发元素不会因布局变化移位。
• 浏览器兼容性：:has()选择器已被现代主流浏览器支持（Chrome、Edge、Safari，Firefox需开启layout.css.has-selector.enabled配置）。

内容的提问来源于stack exchange，提问作者xkeshav