0

无论如何，我正在尝试创建一个切换链接，它基本上是两个相互重叠的按钮。其中一个会display:none在单击时变为，反之亦然。

目前，我的 CSS 是这样的

#main-nav:target + .page-wrap {
    position:absolute;
    left:-80px;
    #open-menu {
    display: none;
    }
    #close-menu {
    display: block;
    }
}

...但 #open-menu 和 #close-menu 显示选项似乎没有显示。有什么帮助吗？

编辑：好的，所以我需要一个预处理器好吧._。

再次编辑：得到它的工作，谢谢大家！只是想知道，有没有办法让我的整个页面 div（不包括菜单）滑出页面？还是一些简单的溢出-x：隐藏？

4

2 回答 2

1

如果您没有使用预处理器并且您不想使用，我怀疑您可以像这样重写您的 CSS，假设您的 HTML 结构实际上对应于选择器：

#main-nav:target + .page-wrap {
    position: absolute;
    left: -80px;
}

#main-nav:target + .page-wrap #open-menu {
    display: none;
}

#main-nav:target + .page-wrap #close-menu {
    display: block;
}

当然，如果#open-menu并且#close-menu不是 的后代.page-wrap，那么即使您确实使用预处理器来支持编写嵌套样式规则，这也根本不起作用（因为预处理器不能做某事，如果它不能用 plain CSS）。

如前所述，如果这些元素的相关性不能用后代和同级组合符来表达，那么您将不得不使用 JavaScript 来实现您想要做的事情。

于 2013-04-11T12:15:30.047 回答
0

作为演示，我尝试了以下方法：

<div class="page-wrap">
    <a id="close-menu" href="#open-menu">Close</a> 
    <a id="open-menu" href="#close-menu">Open</a> 
</div>

使用以下 CSS：

.page-wrap #open-menu {
    display: block;
}
.page-wrap #close-menu {
    display: none;
}

.page-wrap #open-menu:target {
    display: block;
}
.page-wrap #open-menu:target + #close-menu {
    display: none;
}

.page-wrap #close-menu:target {
    display: block;
}
.page-wrap #close-menu:target + #open-menu {
    display: none;
}

小提琴参考： http: //jsfiddle.net/audetwebdesign/5aSdW/
演示链接：http: //jsfiddle.net/audetwebdesign/5aSdW/show

每次单击打开或关闭链接时，都会显示备用链接。

我不确定这是否过于有用，但可以做到。

于 2013-04-11T13:21:10.630 回答