一旦图像被点击，它会比其他图像“弹出”？

Question

我有三个图像，每个图像都有一个值，所以第一个图像= 1，第二个图像= 2，第三个图像= 3。

我不明白的是如何选择一个，使其他人看起来透明，并使用所选图像的值？

有没有办法通过html5，css3？

下面是类似什么，我希望它看起来像当我点击一个例子（在本例中它是基于悬停）：

http://jsbin.com/umacat/4/edit

提前感谢！

Answer 1

这是我的策略：

1. 商店的切换状态，也就是说，clickToggle，在每个元素的数据对象。
2. 更新，当您在—单击此值也被检查，并允许以确定行动
3. 的方式评估clickToggle值后，执行必要措施的clickToggle值。我们不会使用:hover，而是切换要添加/删除的类。

这里是更新的CSS：

.box.toggled { 
    box-shadow: 0 2px 8px #334; 
    background:#ccd; 
    -webkit-transform: scale(1.1); 
    transform: scale(1.1); 
    opacity:1; 
} 

这里是我的代码，并demonstrated to be working，太：

$(function(){ 
    $('.box').on('click', function(e) { 
    // Prevent default function 
    e.preventDefault(); 

    // Check state 
    if(!$(this).data('clickToggle') || $(this).data('clickToggle') === 0) { 

     // Update state, add class 
     $(this) 
     .data('clickToggle', 1) 
     .addClass('toggled'); 

     // Force siblings to revert to original state 
     $(this) 
     .siblings() 
     .data('clickToggle', 0) 
     .removeClass('toggled'); 

    } else if($(this).data('clickToggle') === 1) { 

     // Update state, remove class 
     $(this) 
     .data('clickToggle', 0) 
     .removeClass('toggled'); 
    } 
    }); 
});