Question

我想在点击它时切换标签的背景图像并选中或取消选中属于它的复选框;所有这一切都与纯CSS。

说明：我们谈论的标签是移动菜单按钮，当菜单打开时，它应该更改为X而不是三个水平条。当菜单关闭时，它应该恢复正常。

如何在现有的上下文中实现这一点（参见jsfiddle）？

jsfiddle with the existing functionality of the menu

这是我的HTML：

<nav id="mobile-navigation" class="hidden-xl">
<label for="nav-trigger" id="label-trigger"></label>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<ul id="menu">
    <li><a href="">Lorem ipsum</a></li>
    <li><a href="">Lorem ipsum</a></li>
    <li><a href="">Lorem ipsum</a></li>
    <li><a href="">Lorem ipsum</a></li>
    <li><a href="">Lorem ipsum</a></li>
</ul>

这里有CSS：

#mobile-navigation {
    display: block;
    width: 100%;
    background-color: #000;
}

#menu {
    display: none;
}

#menu li {
    width: 100%;
    text-align: center;
}

#menu li a {
    display: block;
    padding: 1em;
    background-color: none;
    color: #FFF;
    font-size: 1.2em;
    text-decoration: none;
    font-family: "RotisRoman", Arial, Helvetica, san-serif;
    font-size: 24px;
    font-weight: 700;
}

#menu li a:hover {
    color: #999;
}

label[for="nav-trigger"] {
    position: fixed;
    left: 30px;
    top: 30px;
    z-index: 2;
    height: 50px;
    width: 50px;
    cursor: pointer;
    background-image: url("http://www.circlecafebar.co.uk/photographs/nav-button.jpg");
}

/*this should be the image replacing the labels image*/
.nav-open {
    background-image: url("/_images/close_btn.png");
}

#nav-trigger {
    display: none;
}

.nav-trigger {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

.nav-trigger:checked + #menu {
    display: block;
    list-style: none;
    position: fixed;
    padding: 40px 0px;
    width: 100%;
    height: 100%;
    top: 85px;
    z-index: 2;
    background-color: #d8d8d8;
    margin: 0 auto;

}

Answer 1

魔术选择器是~

＆＃13;

#mobile-navigation {
	display: block;
	width: 100%;
    background-color: #000;
}

#menu {
	display: none;
}

#menu li {
	width: 100%;
	text-align: center;
}

#menu li a {
	display: block;
	padding: 1em;
	background-color: none;
	color: #FFF;
	font-size: 1.2em;
	text-decoration: none;
	font-family: "RotisRoman", Arial, Helvetica, san-serif;
	font-size: 24px;
	font-weight: 700;
}

#menu li a:hover {
	color: #999;
}

#bodarto {
	margin-top: 45px;
}

label[for="nav-trigger"] {
	position: fixed;
	left: 30px;
	top: 30px;
	z-index: 2;
	height: 50px;
	width: 50px;
	cursor: pointer;
	background-image: url("http://www.circlecafebar.co.uk/photographs/nav-button.jpg");
}

input:checked + label {
	background-image: url("http://findicons.com/files/icons/1714/dropline_neu/48/dialog_close.png");
}

#nav-trigger {
	display: none;
}

.nav-trigger {
	position: absolute;
	clip: rect(0, 0, 0, 0);
}

.nav-trigger:checked ~ #menu {
	display: block;
	list-style: none;
	position: fixed;
	padding: 40px 0px;
	width: 100%;
	height: 100%;
	top: 85px;
	z-index: 2;
	background-color: #d8d8d8;
	margin: 0 auto;
}

＆＃13;

<nav id="mobile-navigation" class="hidden-xl">
   <input type="checkbox" id="nav-trigger" class="nav-trigger" />
   <label for="nav-trigger" id="label-trigger"></label>
   <ul id="menu">
       <li><a href="lorem.php" title="">Lorem ipsum</a></li>
       <li><a href="" title="">Lorem ipsum</a></li>
       <li><a href="" title="">Lorem ipsum</a></li>
       <li><a href="/kontakt.php" title="">Kontakt</a></li>
       <li id="bodarto"><a href="http://www.bodarto.ch/" target="_blank"><img src="_images/bodarto.png" alt="" border="0" /></a></li>
   </ul>
</nav>

＆＃13;

用纯CSS交换标签背景

1 个答案: