html中点击换一张改变图片,如何用CSS或Javascript实现：点击一张图片，该图片换为另一张图片？...

Document

.box{

width:100px;

height:100px;

border:1px solid red;

position: relative;

overflow: hidden;

}

.A,.B{

position: absolute;

z-index: 1;

}

input{

display: block;

width: 100px;

height: 100px;

opacity:50;

position: absolute;

z-index: 10;

opacity:0;

}

.i_2{

display: none;

}

/*点击i_1 让A图片隐藏，显示B图片*/

.i_1:checked ~.box .A{

display: none;

}

/*点击i_1让i_2按钮出现(看不见)*/

.i_1:checked +.i_2{

display: block;

}

/*点击.i_2 让A显示*/

.i_2:checked ~.box .A{

display: block;

}

/*同时让.i_2隐藏，便于后面再次点击i_1*/

.i_2:checked{

display: none;

}

经过测试 是成功的 利用的是input元素的：checked，纯css实现，不过有点麻烦，用js简单些