如何在单击...后增加和调整css doc菜单面板图像的大小？

Question

我有css3停靠菜单面板，其中包含8个图像。如果点击特定图像，我想增加它的大小/更改背景颜色，反之亦然，同时点击另一个图像上一个图像应重新调整尺寸或背景颜色删除....我怎么能这样做..？

Answer 1

试试这个 - 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;
}

Answer 2

如果可以，请尝试js

<script>
document.getElementById("wantedelement").attribute_size="newvalue"; 
</script>

http://www.w3schools.com/js/js_htmldom_css.asp