我有一个css3停靠菜单面板,其中包含8个图像。如果点击特定的图像,我想增加它的大小/更改背景色,反之亦然,同时点击另一个图像,上一个图像应该重新调整大小或删除背景色。。。。我该怎么做。。?
试试这个-DEMO
HTML
<a href="#zoom1"><img id="zoom1" src="http://lorempixel.com/100/100" alt="" /></a>
<a href="#zoom2"><img id="zoom2" src="http://lorempixel.com/100/100" alt="" /></a>
<a href="#zoom3"><img id="zoom3" src="http://lorempixel.com/100/100" alt="" /></a>
CSS
#zoom1,
#zoom2,
#zoom3 {
background: #e3e3e3;
display: block;
float: left;
padding: 20px;
margin-right: 5px;
width: 100px;
-webkit-transition: all 1s;
}
#zoom1:target,
#zoom2:target,
#zoom3:target {
background: #555;
width: 200px;
}
如果可以,请尝试js
<script>
document.getElementById("wantedelement").attribute_size="newvalue";
</script>
http://www.w3schools.com/js/js_htmldom_css.asp