为什么不能将鼠标悬停在<nav>中的<a>链接上？

时间：2019-07-01 21:16:28

标签： html css

每当我将鼠标悬停在导航栏中的链接之一上时，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%;
}

我希望将鼠标悬停在全屏模式下时会得到黑色背景和白色文本。但是我没有任何悬停动作。

3 个答案:

答案 0 :(得分：1)

如果您将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>

答案 1 :(得分：0)

.first-view中的z-index将整个div推到堆栈上下文的后面。删除z-index或为其赋予更高的值。

答案 2 :(得分：0)

问题是由z-index div中的first-view引起的，该div包裹了导航栏。

如果您从CSS中删除该属性，则可以按预期将鼠标悬停在导航链接上。

相关问题
最新问题