javascript - 图像出现在另一图像之上/之上？

Question

我正在为我的类(class)建立一个美食车网站。我想要有一个盘子的图像，然后一旦它被点击就会有一个不同的食物图像出现在它上面。我想知道可以使用哪种 javascript 或 else/if 语句来实现此目的。如果这个问题含糊不清，请告诉我。

我会使用一些示例，例如 plate.gif、sandwhich.gif 等。

感谢任何反馈。我也可以接受悬停效果而不是点击或鼠标按下事件。

Answer 1

我已经使用 css 制作了一个简单的方法，当您单击盘子时会出现图像，如果需要，您可以将其更改为悬停 http://jsfiddle.net/suwz0zhg/1/

<img class="b" src="http://media.npr.org/assets/img/2013/01/10/plate_wide-4764eb8d34c625adfb8c18014a6f43eb300bf079.jpg?s=6" />
<img class="a" src="https://bridor.com/wp-content/uploads/product-images/60HABN-11.png" />

CSS

 img{
position:absolute;
width:300px;
height:250px;
}

.a{
margin-top:50px;
margin-left:80px;
width:150px;
height:150px;
z-index:-10;
transition:0s 10s;

}

.b:active ~ .a{
z-index:5;
transition:0s;
}