html - 纯CSS交换Label背景

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

神奇的选择器是~

#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;
}

<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>