链接显示在“查看源”中,但不可单击

时间:2018-07-02 01:02:49

标签: javascript html css hyperlink

我正在尝试了解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;
    }
}

1 个答案:

答案 0 :(得分:5)

pointer-events: none;规则下的.title声明使这些链接不可点击