正在使用 html popover API和带有锚点定位的嵌套 css 声明。
我的要求是当弹出窗口打开时；如何将某些样式应用于具有属性的元素popover，表示为弹出窗口父元素
目前，当我们将鼠标悬停在此父元素上时，它会旋转，并且我希望当弹出窗口打开时，父元素应该保持在相同的位置，并且我们不应该与其交互，目前即使背景在那里，我们仍然可以将鼠标悬停在它上面。
尝试过::popover-open，但无法理解在嵌套的 css 模式中应该写什么
这是示例代码
.container__setting {
container: setting/inline-size;
.setting__trigger {
anchor-name: --setting;
position: fixed;
top: 82px;
right: 32px;
width: max-content;
height: auto;
border-radius: 10%;
background-color: unset;
border: solid;
cursor: pointer;
display: flex;
font-size: 4rem;
transition: transform 330ms ease-in-out;
&::after {
content: '🕸';
}
&:hover {
transform: scale(1.05) rotate(45deg);
}
}
.setting__panel {
position: fixed;
position-anchor: --setting;
top: calc(anchor(bottom) + 15px);
right: calc(anchor(left) + 10px);
justify-self: anchor-center;
width: 20rem;
height: 20rem;
background-color: hwb(20 10% 40%);
border-radius: 4px;
padding: 10px;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
color: color(xyz, 0, 0, 1);
&::backdrop {
background-color: hsl(0 0% 10% / 0.5);
backdrop-filter: blur(2px);
}
.control__group {
display: grid;
grid-auto-flow: row;
gap: 0.5rem;
/* Control Buttons */
& button, & select {
background-color: color(xyz 0.05 0.05 0.09);
color: white;
border: none;
padding: 14px 24px;
cursor: pointer;
transition: var(--transition);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
font-weight: 600;
font-size: 1rem;
letter-spacing: 0.01em;
&:hover:not(.close) {
background-color: color(xyz 0.02 0.01 0.02);
transform: translateY(-3px);
}
&.close {
width: 2rem;
height: 3rem;
outline: 1px dashed green;
justify-self: end;
&:hover {
font-size: 30px;
}
}
}
}
& [popover] {
position: fixed;
inset: unset;
width: fit-content;
height: fit-content;
right: 0;
bottom: 0;
margin: auto;
overflow: auto;
color: CanvasText;
background-color: Canvas;
padding: 1rem;
border: solid;
border-radius: 1rem;
opacity: 0;
visibility: hidden;
transition: translate 0.7s ease-out,
display 0.7s ease-out allow-discrete,
overlay 0.7s ease-out allow-discrete,
height 0.5s ease-in-out;
translate: 0 -2rem;
&:popover-open {
opacity: 1;
visibility: visible;
translate: 0 0;
right: 40px;
bottom: 0;
translate: 0 0;
height: 40px;
@starting-style {
opacity: 0;
visibility: hidden;
}
}
}
}<div class="container__setting">
<button class="setting__trigger" popovertarget="options" popovertargetaction="show"></button>
<div class="setting__panel" id="options" popover="hint">
<div class="control__group">
<button id="close" class="close" popovertarget="options" popovertargetaction="hide">X</button>
<button id="new" class="add">Add New </button>
<button id="shuffle" class="shuffle"> Shuffle </button>
</div>
</div>
</div>更新
按照建议尝试，它起作用了，但是在元素的嵌套块内写入不起作用；下面是工作示例（是的，语法也有点不同）。
.container__setting {
.setting_trigger {
// some css properties
// writing inside does not work
}
// writing outside but inside parent selector works
&:has([popover]:popover-open) .setting__trigger {
background-color: blue;
transform: scale(1.05) rotate(45deg);
}
}
另一种嵌套语法也可以按如下方式工作
.container__setting {
&:has(:popover-open) {
.setting__trigger {
background-color: green;
transform: scale(1.05) rotate(45deg);
}
}
}
您可以使用
:has伪类来显示当按钮具有具有伪类的.container__setting子项时保持按钮上的变换：:popover-open另一种选择是将
.setting__panel元素放在 HTML 中的之前，.setting__trigger并使用同级组合器（+或~）在弹出窗口打开时影响按钮：