gpt4 book ai didi

css - 定位前一个兄弟元素 CSS

转载 作者:行者123 更新时间:2023-11-28 12:08:25 34 4
gpt4 key购买 nike

<分区>

我正在使用 Canvas 外菜单,我一直在努力使它正常工作。为了让我的固定菜单和 off-canvas 很好地播放,我不得不将我的标题从 off-canvas 内包装中取出,但现在当菜单打开时我的标题不会移动。

打开 off canvas 时,它会将 .is-open-right 应用于内部包装器,然后将 CSS 应用于它。

仅当 .is-right-open 类添加到我的包装器时,我才尝试将这行 CSS 添加到我的 header 。

-webkit-transform: translateX(-450px);
transform: translateX(-450px);

我试图以这种方式定位:

.is-open-right, .is-open-right > .header  {
-webkit-transform: translateX(-$offcanvas-size-large);
transform: translateX(-$offcanvas-size-large);

当菜单关闭时,我的 HTML 看起来像这样:

<div class="off-canvas-wrapper">
<header class="header scrolled" role="banner"></header>
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper=""></div>
</div>

打开时的 HTML

<div class="off-canvas-wrapper">
<header class="header scrolled" role="banner"></header>
<div class="off-canvas-wrapper-inner is-off-canvas-open is-open-right" data-off-canvas-wrapper=""></div>
</div>

只有当下一个兄弟元素具有类 .is-open-right 时,我才能定位我的标题元素吗?从我读过的内容来看...看起来我可能必须使用 JS 解决方案。

34 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com