我有一个我以前从未遇到过的最奇怪的问题，也找不到任何解释。我页面的第一部分工作正常(http://imgur.com/a/Tg0Qs)。但是我页面的下一部分就像一个可点击的链接或按钮 ( http://imgur.com/a/9Tz1b )。单击此部分的任意位置时，它会滚动回顶部。显然，这是不希望的。任何帮助都会很棒!
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<!-- Bootsrap With Flexbox Grid -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap-flex.min.css" rel="stylesheet" >
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400|Raleway" rel="stylesheet">
<!-- icons -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- My CSS -->
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<!------------------- HEADER --------------------->
<section id="header">
<nav>
<div class="container">
<div class="row">
<div class="col-xs-12">
<img src="/img/logoblack.png" alt="Temple Naylor logo" class="logo">
<ul class="main-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Skill</a></li>
<li><a href="#">Résumé</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Writing</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container header">
<div class="row hello">
<div class="col-xs-12">Hello I'm</div>
</div>
<div class="row name">
<div class="col-xs-12">Temple Cerulean Naylor</div>
</div>
<div class="row job">
<div class="col-xs-12">Web Developer / UX/UI Designer</div>
</div>
<div class="row">
<div class="col-xs-12">
<button type="button" class="btn btn-primary lets-talk">Let's Talk</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<p ><a href="#"><i class="fa fa-arrow-circle-down scroll" aria-hidden="true"></i></p>
</div>
</div>
</div>
</section>
<!------------------- ABOUT --------------------->
<section id="about">
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="me">
<img class="img-responsive" src="img/me.png" alt="me">
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-8">
<p>Hello</p>
</div>
</div>
</div>
</section>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>
</html>
CSS:
/* -------------------------------------
HEADER
--------------------------------------*/
#header {
background: url('/img/header.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
}
.main-nav {
float: right;
list-style: none;
margin-top: 55px;
}
.main-nav li {
display: inline-block;
margin-left: 40px;
}
.main-nav li a:link,
.main-nav li a:visited {
padding: 8px 0;
color: black;
text-decoration: none;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 120%;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s;
}
.main-nav li a:hover,
.main-nav li a:active {
border-bottom: 2px solid #2980b9;
}
.logo {
padding-top: 2%;
}
.header {
text-align: center;
font-family: 'Raleway', sans-serif;
font-weight: 300;
font-weight: 300;
text-transform: uppercase;
color: black;
}
.hello {
font-size: 200%;
padding-top: 5%;
}
.name {
font-size: 350%;
}
.job {
font-size: 210%;
}
.lets-talk {
margin-top: 6%;
font-size: 150%;
}
.scroll {
font-size: 250%;
margin-top: 10%;
color: black;
transition: all .2s ease-in-out;
}
.scroll:hover {
color: #2980b9;
transform: scale(1.1);
}
编辑:对于质量不佳的图片，我深表歉意。当截取我的屏幕截图时，它不会打印鼠标(我试图显示问题)。相反，我不得不用手机拍照。
最佳答案
您忘记关闭此行上的链接 ( a) 标签:
<p ><a href="#"><i class="fa fa-arrow-circle-down scroll" aria-hidden="true"></i></p>
开头的一切 <a href="#">页面末尾的标记被视为链接的一部分。
关于jquery - 页面的一半被链接(在鼠标悬停时突出显示)时不应该？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41326423/