我正在为我的类(class)建立一个美食车网站。我想要有一个盘子的图像,然后一旦它被点击就会有一个不同的食物图像出现在它上面。我想知道可以使用哪种 javascript 或 else/if 语句来实现此目的。如果这个问题含糊不清,请告诉我。
我会使用一些示例,例如 plate.gif、sandwhich.gif 等。
感谢任何反馈。我也可以接受悬停效果而不是点击或鼠标按下事件。
最佳答案
我已经使用 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;
}
关于javascript - 图像出现在另一图像之上/之上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26500255/