我尝试了以下代码，它在单击图像时将其单击变为另一图像，并且再次单击后应切换回先前的图像。在下面的代码中，只有在按住鼠标按钮时，图像才会保持可见。我希望它保持可见状态，直到您再次单击。
<!DOCTYPE html>
<html>
<head><title>HTML5 form</title><link rel="SHORTCUT ICON" href="/e/ref.ico" />
<style type="text/css">
div.nav {
height: 340px;
width: 300px;
margin:0;
padding:0;
background-image:url("http://s24.postimg.org/6g070ei6d/logo.jpg");
}
div.nav a, div.nav a:link, div.nav a:visited {
display:block;
}
div.nav img {
border:0;
}
div.nav a:active img {
visibility:hidden;
.thumbnail:focus span
visibility: visible;
}
</style>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'></head>
<body>
<div class="nav">
<a href="#">
<img src="http://s10.postimg.org/bthpk39yh/logo_red.jpg" alt="" />
</a>
</div>
</body></html>
最佳答案
尝试这个：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.checkbox { display: none; }
.label {
display: inline-block;
width: 100px;
height: 100px;
background: url(http://www.letsgomobile.org/images/reviews/0102/samsung-camera-phone-test-photos.jpg);
}
.checkbox:checked + .label {
background: url(http://www.letsgomobile.org/images/reviews/0102/samsung-camera-phone-test-pictures.jpg);
}
</style>
</head>
<body>
<input type="checkbox" class="checkbox" id="checked">
<label class="label" for="checked"></label>
</body>
</html>
关于html - 更改图片onclick并再次更改为上一张图片-仅使用CSS和HTML，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19050488/