我正在尝试了解Codrops的this demo site的工作方式。 我试图将标题变成链接，但是尽管在“查看源代码”中正确显示了标题，但当我实时运行它们时却无法单击它们。
为什么会这样？
我已在下面复制了该网站的代码，并添加了指向google.com的链接：
到目前为止，我唯一尝试过的就是将一个标签嵌套在title标签内，但是我不明白为什么这不起作用。
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Little Fragments | Codrops</title>
<meta name="keywords" content="effect, web design, javascript, css, poster, cut, fragment, parallax" />
<link rel="shortcut icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/fragments.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<script>document.documentElement.className = 'js';</script>
</head>
<body class="loading">
<main>
<section class="section section--intro">
<div class="content">
<div id="frag-1" class="fragment-wrap" style="background-image: url(img/2.jpg)"></div>
<h2 class="title"><a href="https://google.com">blazed</a></h2>
<p class="text"><span class="deco-bg deco-bg--color-1">“Waking up this morning, I smile. Twenty-four brand new hours are before me. I vow to live fully in each moment and to look at all beings with eyes of compassion.” ― Thich Nhat Hanh</span></p>
</div>
</section><!-- /intro -->
<section class="section section--flow">
<div class="content">
<div id="frag-2" class="fragment-wrap fragment-wrap--right" style="background-image: url(img/4.jpg)"></div>
<h2 class="title title--left"><a href="https://google.com">hollos</a></h2>
<p class="text text--left"><span class="deco-bg deco-bg--color-2">“Every thought, every word, and every action that adds to the positive and the wholesome is a contribution to peace. Each and every one of us is capable of making such a contribution.” ― Aung San Suu Kyi</span></p>
</div>
</section>
<section class="section section--flow">
<div class="content">
<div id="frag-3" class="fragment-wrap" style="background-image: url(img/1.jpg)"></div>
<h2 class="title"><a href="https://google.com">zizzle</a></h2>
<p class="text"><span class="deco-bg deco-bg--color-3">“The meaning of life is just to be alive. It is so plain and so obvious and so simple. And yet, everybody rushes around in a great panic as if it were necessary to achieve something beyond themselves.” ― Alan W. Watts</span></p>
</div>
</section>
<section class="section section--flow">
<div class="content">
<div id="frag-4" class="fragment-wrap fragment-wrap--right" style="background-image: url(img/3.jpg)"></div>
<h2 class="title title--left"><a href="https://google.com">shimmy</a></h2>
<p class="text text--left"><span class="deco-bg deco-bg--color-4">“We’re in such a hurry most of the time we never get much chance to talk. The result is a kind of endless day-to-day shallowness, a monotony that leaves a person wondering years later where all the time went and sorry that it’s all gone.” — Robert M. Pirsig</span></p>
</div>
</section>
<section class="section section--flow">
<div class="content">
<div id="frag-5" class="fragment-wrap" style="background-image: url(img/2.jpg)"></div>
<h2 class="title"><a href="https://google.com">eponym</a></h2>
<p class="text"><span class="deco-bg deco-bg--color-5">“To escape from the world means that one's mind is not concerned with the opinions of the world.” ― Koso Joyo Daishi</span></p>
</div>
</section>
</main>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/main.js"></script>
<script>
(function() {
imagesLoaded(document.querySelectorAll('.fragment-wrap'), { background: true }, function() {
document.body.classList.remove('loading');
new FragmentsFx(document.getElementById('frag-1'));
new FragmentsFx(document.getElementById('frag-2'), {
fragments: 15,
boundaries: {x1: 200, x2: 100, y1: 10, y2: 50},
randomIntervals: {
top: {min: 0,max: 90},
left: {min: 0,max: 90},
dimension: {
width: {min: 5,max: 20, fixedHeight: 5},
height: {min: 10,max: 100, fixedWidth: 5}
}
}
});
new FragmentsFx(document.getElementById('frag-3'), {
fragments: 20,
boundaries: {x1: 100, x2: 300, y1: 0, y2: 0},
randomIntervals: {
top: {min: 0,max: 90},
left: {min: 0,max: 90},
dimension: {
width: {min: 50,max: 100, fixedHeight: 0.5},
height: {min: 50,max: 100, fixedWidth: 0.5}
}
}
});
new FragmentsFx(document.getElementById('frag-4'), {
fragments: 10,
boundaries: {x1: 250, x2: 75, y1: 50, y2: 50},
randomIntervals: {
top: {min: 0,max: 90},
left: {min: 0,max: 90},
dimension: {
width: {min: 30,max: 50, fixedHeight: 10},
height: {min: 30,max: 50, fixedWidth: 10}
}
},
parallax: true
});
new FragmentsFx(document.getElementById('frag-5'), {
fragments: 20,
boundaries: {x1: 50, x2: 300, y1: 0, y2: 0},
randomIntervals: {
top: {min: 0,max: 40},
left: {min: 0,max: 90},
dimension: {
width: {min: 10,max: 50, fixedHeight: 0.5},
height: {min: 5,max: 10, fixedWidth: 5}
}
},
parallax: true,
randomParallax: {min: 30, max: 300}
});
});
})();
</script>
</body>
和CSS：
*,
*::after,
*::before {
box-sizing: border-box;
}
body {
font-family: 'Inconsolata', monospace;
color: #080811;
background: #f0f0f0;
}
a {
text-decoration: none;
color: #c61dc8;
outline: none;
}
a:hover,
a:focus {
color: #333;
text-decoration: underline;
}
.hidden {
position: absolute;
overflow: hidden;
width: 0;
height: 0;
pointer-events: none;
}
/* Icons */
.icon {
display: block;
width: 1.5em;
height: 1.5em;
margin: 0 auto;
fill: currentColor;
}
/* Page Loader */
.js .loading::before {
content: '';
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f0f0f0;
}
.js .loading::after {
content: '';
position: fixed;
z-index: 10000;
top: 50%;
left: 50%;
width: 30px;
height: 70px;
margin: -35px 0 0 -15px;
pointer-events: none;
border: 3px solid #c61dc8;
-webkit-animation: loaderAnim 0.8s ease-out infinite alternate
forwards;
animation: loaderAnim 0.8s ease-out infinite alternate forwards;
}
@-webkit-keyframes loaderAnim {
to {
-webkit-transform: translate3d(0, -100px, 0);
transform: translate3d(0, -100px, 0);
}
}
@keyframes loaderAnim {
to {
-webkit-transform: translate3d(0, -100px, 0);
transform: translate3d(0, -100px, 0);
}
}
.section {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.section--intro {
background: url(../img/arrow.svg) no-repeat calc(100% - 2em) calc(100% - 1.5em);
background-size: 40px;
min-height: 100vh;
}
.section--flow {
padding: 3em 0;
min-height: 100vh;
}
.section--related {
padding: 3em 1em;
font-weight: bold;
text-align: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.section__heading {
width: 100%;
}
.media-item {
display: inline-block;
padding: 1em;
vertical-align: top;
}
.media-item__img {
max-width: 100%;
}
.media-item:hover .media-item__img,
.media-item:focus .media-item__img {
border-top: 2px solid currentColor;
}
.media-item__title {
font-size: 1em;
margin: 0;
padding: 0.5em;
}
/* Content */
.content {
margin: auto;
max-width: 1200px;
min-height: 600px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-flex: 0;
-ms-flex: none;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
flex: none;
position: relative;
}
.title {
position: absolute;
font-size: 8vw;
margin: 0;
pointer-events: none;
bottom: 10%;
left: 35%;
}
.title--left {
left: auto;
right: 35%;
}
.text {
font-size: 1.15em;
position: absolute;
width: 50%;
bottom: calc(10% + 8vw);
left: 40%;
pointer-events: none;
}
.text--left {
left: 10%;
text-align: right;
}
.deco-bg {
line-height: 1.6;
}
.deco-bg--color-1 {
background: -webkit-linear-gradient(bottom, #807cfd 90%, transparent 90%, transparent);
background: linear-gradient(to top, #807cfd 90%, transparent 90%, transparent);
}
.deco-bg--color-2 {
background: -webkit-linear-gradient(bottom, #fdf164 90%, transparent 90%, transparent);
background: linear-gradient(to top, #fdf164 90%, transparent 90%, transparent);
}
.deco-bg--color-3 {
background: -webkit-linear-gradient(bottom, #93b3f2 90%, transparent 90%, transparent);
background: linear-gradient(to top, #93b3f2 90%, transparent 90%, transparent);
}
.deco-bg--color-4 {
background: -webkit-linear-gradient(bottom, #c2f3b0 90%, transparent 90%, transparent);
background: linear-gradient(to top, #c2f3b0 90%, transparent 90%, transparent);
}
.deco-bg--color-5 {
background: -webkit-linear-gradient(bottom, #ffb857 90%, transparent 90%, transparent);
background: linear-gradient(to top, #ffb857 90%, transparent 90%, transparent);
}
/* Adjust the layout for smaller screens */
@media screen and (max-width: 50em) {
.codrops-header__tagline,
.github {
margin: 1em 0 0;
width: 100%;
}
.fragment-wrap {
width: 80vw;
margin: 0;
}
.fragment-wrap--right {
margin: 0;
}
.text {
width: 80%;
left: 10%;
bottom: auto;
top: 10%;
}
.title {
font-size: 16vw;
}
}
答案 0 :(得分：5)
pointer-events: none;规则下的.title声明使这些链接不可点击