0

次のコードを試してみましたが、画像をクリックすると別の画像に変わり、もう一度クリックすると前の画像に戻ります。以下のコードでは、マウス ボタンを押している間だけ画像が表示されたままになります。もう一度クリックするまで表示したままにします。 

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

2 に答える 2

3

それはチェックボックスで行うことができます。ここで見つかりましたCSSのみを使用してクリック時に画像を変更する方法は?

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

于 2013-09-27T12:21:05.673 に答える