每当我将鼠标悬停在导航栏中的一个链接上时，a:hover 属性似乎不起作用。它似乎对于网站较低位置的其他链接工作正常，但出于某种原因在导航栏的顶部却无法正常工作。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>Portfolio Website</title>
</head>
<body>
<div class="first-view">
<nav>
<ul>
<a class="nav-links" href="#">HOME</a>
<a class="nav-links" href="#">PORTFOLIO</a>
<a class="nav-links" href="#">ABOUT</a>
<a class="nav-links" href="#">CONTACT</a>
</ul>
</nav>
<div id="home">
<section class="first-home-section">
<p class="name">Devon Rusinek</p>
<p class="role">Web Developer</p>
</section>
</div>
</div>
<div class="second-view">
<div id="portfolio">
<section class="first-portfolio-section">
<h1 class="portfolio-title">portfolio</h1>
</section>
<section class="second-portfolio-section">
<p class="a-basic">ablah blah blah</p>
<p class="b-basic">bblah blah blah</p>
<p class="c-basic">cblah blah blah</p>
</section>
</div>
</div>
<div class="third-view">
<div id="about">
<section class="first-about-section">
<h1 class="about-title">about</h1>
</section>
<section class="second-about-section">
<p class="basic">blah blah blah</p>
</section>
</div>
</div>
<div class="fourth-view">
<div id="contact">
<section class="first-contact-section">
<h1 class="contact-title">contact</h1>
</section>
<section class="second-contact-section">
<p class="basic">blah blah blah</p>
</section>
</div>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
@import url('https://fonts.googleapis.com/css?family=B612+Mono|Architects+Daughter|Catamaran|Economica|Orbitron|Noto+Serif|Sanchez|Noto+Sans+HK|Rajdhani|Monda|Courgette|Permanent+Marker|Righteous&display=swap');
/*FIRST-HOME-SECTION CHILDREN*/
.name{
font-size: 60px;
flex: 1;
text-align: center;
font-family: 'Architects Daughter', 'B612 Mono', monospace;
}
.role{
font-size: 30px;
flex: 1;
text-align: center;
font-family: 'Architects Daughter', 'B612 Mono', monospace;
}
/*A LINKS AND LISTS*/
ul{
list-style: none;
display: flex;
}
.nav-links{
text-decoration: none;
color: black;
display: inline;
flex: 1;
text-align: center;
border: 1pt black solid;
padding: 3rem;
letter-spacing: 3px;
font-family: 'B612 Mono', monospace;
}
.nav-links:hover{
background-color: black;
color: white;
}
/*BODY*/
body{
display: flex;
flex-direction: column;
}
/*VIEWS*/
.first-view{
z-index: -1;
background-color: #FFFED6;
height: 100vh;
}
.second-view{
background-color: #E8E2B7;
min-height: 30rem;
}
.third-view{
min-height: 30rem;
background-color: #FFFED6;
}
.fourth-view{
min-height: 15rem;
background-color: #E8E2B7;
}
/*SECTIONS*/
.first-home-section{
display: flex;
flex-direction: column;
margin: 20% 0;
}
.first-portfolio-section{
display: flex;
}
.second-portfolio-section{
display: flex;
flex-direction: row;
}
.first-about-section{
display: flex;
}
.first-contact-section{
display: flex;
}
/*PARAGRAPH CONTENT*/
.basic{
flex: 1;
text-align: center;
margin-top: 12rem;
}
.a-basic{
flex: 1;
text-align: center;
margin-top: 12rem;
}
.b-basic{
flex: 1;
text-align: center;
margin-top: 12rem;
}
.c-basic{
flex: 1;
text-align: center;
margin-top: 12rem;
}
/*SECTION TITLES*/
.portfolio-title{
font-weight: 200;
font-family: 'B612 Mono', monospace;
margin: 5% auto 0%;
}
.about-title{
font-weight: 200;
font-family: 'B612 Mono', monospace;
margin: 5% auto 0%;
}
.contact-title{
font-weight: 200;
font-family: 'B612 Mono', monospace;
margin: 5% auto 0%;
}
当我在全屏模式下悬停鼠标时，我希望得到黑色背景和白色文本。然而，我没有得到任何悬停 Action 。
最佳答案
如果将 z-index: -1; 从 .first-view 移动，您将获得悬停效果
* {
margin: 0;
padding: 0;
}
@import url('https://fonts.googleapis.com/css?family=B612+Mono|Architects+Daughter|Catamaran|Economica|Orbitron|Noto+Serif|Sanchez|Noto+Sans+HK|Rajdhani|Monda|Courgette|Permanent+Marker|Righteous&display=swap');
/*FIRST-HOME-SECTION CHILDREN*/
.name {
font-size: 60px;
flex: 1;
text-align: center;
font-family: 'Architects Daughter', 'B612 Mono', monospace;
}
.role {
font-size: 30px;
flex: 1;
text-align: center;
font-family: 'Architects Daughter', 'B612 Mono', monospace;
}
/*A LINKS AND LISTS*/
ul {
list-style: none;
display: flex;
}
.nav-links {
text-decoration: none;
color: black;
display: inline;
flex: 1;
text-align: center;
border: 1pt black solid;
padding: 3rem;
letter-spacing: 3px;
font-family: 'B612 Mono', monospace;
}
.nav-links:hover {
background-color: black;
color: white;
}
/*BODY*/
body {
display: flex;
flex-direction: column;
}
/*VIEWS*/
.first-view {
background-color: #FFFED6;
height: 100vh;
}
.second-view {
background-color: #E8E2B7;
min-height: 30rem;
}
.third-view {
min-height: 30rem;
background-color: #FFFED6;
}
.fourth-view {
min-height: 15rem;
background-color: #E8E2B7;
}
/*SECTIONS*/
.first-home-section {
display: flex;
flex-direction: column;
margin: 20% 0;
}
.first-portfolio-section {
display: flex;
}
.second-portfolio-section {
display: flex;
flex-direction: row;
}
.first-about-section {
display: flex;
}
.first-contact-section {
display: flex;
}
/*PARAGRAPH CONTENT*/
.basic {
flex: 1;
text-align: center;
margin-top: 12rem;
}
.a-basic {
flex: 1;
text-align: center;
margin-top: 12rem;
}
.b-basic {
flex: 1;
text-align: center;
margin-top: 12rem;
}
.c-basic {
flex: 1;
text-align: center;
margin-top: 12rem;
}
/*SECTION TITLES*/
.portfolio-title {
font-weight: 200;
font-family: 'B612 Mono', monospace;
margin: 5% auto 0%;
}
.about-title {
font-weight: 200;
font-family: 'B612 Mono', monospace;
margin: 5% auto 0%;
}
.contact-title {
font-weight: 200;
font-family: 'B612 Mono', monospace;
margin: 5% auto 0%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>Portfolio Website</title>
</head>
<body>
<div class="first-view">
<nav>
<ul>
<a class="nav-links" href="#">HOME</a>
<a class="nav-links" href="#">PORTFOLIO</a>
<a class="nav-links" href="#">ABOUT</a>
<a class="nav-links" href="#">CONTACT</a>
</ul>
</nav>
<div id="home">
<section class="first-home-section">
<p class="name">Devon Rusinek</p>
<p class="role">Web Developer</p>
</section>
</div>
</div>
<div class="second-view">
<div id="portfolio">
<section class="first-portfolio-section">
<h1 class="portfolio-title">portfolio</h1>
</section>
<section class="second-portfolio-section">
<p class="a-basic">ablah blah blah</p>
<p class="b-basic">bblah blah blah</p>
<p class="c-basic">cblah blah blah</p>
</section>
</div>
</div>
<div class="third-view">
<div id="about">
<section class="first-about-section">
<h1 class="about-title">about</h1>
</section>
<section class="second-about-section">
<p class="basic">blah blah blah</p>
</section>
</div>
</div>
<div class="fourth-view">
<div id="contact">
<section class="first-contact-section">
<h1 class="contact-title">contact</h1>
</section>
<section class="second-contact-section">
<p class="basic">blah blah blah</p>
</section>
</div>
</div>
</div>
</body>
</html>关于html - 为什么我不能将鼠标悬停在 <nav> 中的 <a> 链接上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56842560/