Question

我尝试过以下代码，点击图片后会更改为另一张图片，然后再次点击它会切换回上一张图片。在下面的代码中，只有在按住鼠标按钮时，图像才会保持可见。我想让它保持可见，直到你再次点击。

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

Answer 1

可以使用复选框完成。在How to change an image on click using CSS alone?

找到它

<input class="native-hidden" type="checkbox" />

input[type="checkbox"] {
    content: url('http://placekitten.com/200/200');
    display: block;
    width: 200px;
    height: 200px;
}
input[type="checkbox"]:checked {
    content: url('http://placekitten.com/200/150');
}
.native-hidden {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

演示http://jsfiddle.net/eliranmal/2rwnz/

Answer 2

试试这个：

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

更改图像onclick并再次单击时再次更改为上一图像 - 仅使用CSS和HTML

2 个答案: