单击背景上的任意位置后转到另一个站点？

Question

我创建了一个带有 gif 背景的网站，点击屏幕上的任意位置后我想转到另一个网站（类似于 softlaunch）

我的 html 和 css

body {
  background: url(main.gif) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: #000000;
  width: 100%;
  height: 100%;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" type="image/png" href="fav.png" />
  <link href="style.css" rel="stylesheet" type="text/css">
  <title>@nosleep</title>
</head>

<body>
</body>

</html>

Answer 1

这里有一些代码可以为您处理点击事件：

<script>
    $(document).ready(function () {
        $("body").on("click", function () { location.href = 'http://developer.mozilla.org'; });
    });
</script>

希望对您有所帮助。

Answer 2

您可以通过添加一个填满屏幕的元素来避免 javascript；像这样：

body {
  background: hsl(0,0%,50%);
}
a#fill{
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width:100vw;
  color: color:hsl(0,0%,80%);
  text-align: center;
  padding-top: 45vh;
  transition: .3s background-color, .3s color;
}
a#fill:hover {
  background-color: hsla(0,0%,0%,.3);
  color: white;
}

<a href="https://jsfiddle.net/" id="fill">click to visit jsfiddle</a>

如果您愿意，也可以使用普通的 javascript 执行此操作：

document.addEventListener("DOMContentLoaded", function() {
  document.getElementsByTagName('body')[0].addEventListener('click',function(){
     window.location = 'http://developer.mozilla.org';
  });
});

但是你

单击背景上的任意位置后转到另一个站点？

go to another site after clicking anywhere on background?

html

css

href