我有一个按钮，绝对位置/z-index 1，它覆盖了 100% 的页面。
有一个图像也是绝对位置，覆盖页面 100%，z-index 0。
简单的任务是能够单击页面上的任何位置并使按钮淡出（我也尝试过淡出）并显示图像。
我对 jQ 和 js 很陌生，但是我一直在寻找答案，但找不到任何与这种行为匹配的东西。
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="sf.css">
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<button type="button" class="bttn">HAPPY!</button>
<div class="img">
<img src="damonSF.jpg">
</div>
</body>
<script type="text/jscript" src="sf.js"></script>
<script src="jquery.js"></script>
</html>
img{
position:absolute;
width:100%;
height:100%;
top:0;
right:0;
bottom:0;
left:0;
z-index:0;
}
button{
position:absolute;
opacity:1.0;
width:100%;
height:100%;
text-align:center;
top:0;
right:0;
bottom:0;
left:0;
z-index:1;
}
$(document).ready(function(){
$('.bttn').click(function(){
$('.bttn').fadeTo('fast', 0.0);
});
});