1

我正在尝试创建类似于带有父元素和子元素的仅 CSS 菜单，子元素在单击父元素时出现。它工作正常，除了一个我找不到答案的烦人的错误。子元素是可编辑/可聚焦的，当它被聚焦或处于编辑状态时，您碰巧更改了浏览器选项卡，也许是为了更改音乐，然后回到您正在处理的浏览器选项卡，子元素已经消失。如果我正在编辑子元素并且碰巧在我的电脑上导航到其他地方然后返回它，我希望子元素保持可见。

.parent {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100px;
    height:100px;
    background-color:red;
    position:relative;
}
.child {
    display: none;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    position: absolute;
    left: 101px;
    background-color: green;
}
.parent:focus-within > .child {
    display:flex;
}
<div class="parent" tabindex="0">Parent
    <div class="child" contenteditable="true">Child</div>   
</div>

4

0 回答 0