链接装饰正在影响我的固定导航栏

问题描述

我很新，所以请多包涵。我的目标是使我的图像链接在悬停时显示为半不透明，然后显示为完全不透明。该部分正在运行，但会干扰页面顶部的固定导航栏。

如果我向下滚动直到图像链接位于导航栏“下方”，导航栏也将变为半透明。此时，如果我将鼠标悬停，它们将正确显示完全不透明，并显示在导航栏的下方。

这是我的代码：

.navbar{
  background-color: #50394c; 
  align-items: right;
  width: 100%;
  height: 60px;
  position:fixed;
  top:0;
}
#container a:link{opacity:.5;}
#container a:hover{opacity:1;}
#container{
  display:grid;
  grid-template-columns: repeat(2,50%);
  grid-template-rows: repeat(2,50%);
  grid-gap: 15px;
  padding:20px;
  justify-content: center;
  align-content: center;
}

我的HTML的容器ID为div，其中包含所有链接和图像。

放置不透明度设置（在单个图像元素，div类中，作为链接装饰等）的位置似乎无关紧要，一旦元素在滚动时遇到导航栏，它仍然会影响导航栏。

解决方法

如果我了解您的问题，请不要在导航至图像时导航栏位于下方。我建议将z-index添加到导航栏，使其位于图像顶部。添加代码示例

html,body {
  margin: 0;
}

#page-container {
  position: relative;
  min-height: 100vh;
}

.navbar {
  background-color: #50394c;
  align-items: right;
  width: 100%;
  height: 65px;
  position: fixed;
  top: 0;
  /* Add z-index */
  z-index: 1;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: #f4e1d2;
}

a:hover {
  color: #b2b2b2
}

.nav-list {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin: 10px 60px 0px 900px;
  font-family: 'Oswald',sans-serif;
}

.welcome {
  display: flex;
  flex-direction: row;
  font-size: 1.5em;
  justify-content: flex-start;
}

.text {
  display: flex;
  flex-direction: column;
  font-size: 1.5em;
  justify-content: sflex-start;
  flex-wrap: wrap;
  padding: 150px 150px 75px 50px;
}

.blurb {
  display: flex;
  font-size: 1rem;
  font-family: 'Montserrat',sans-serif;
  color: #50394c;
}

#hello {
  display: flex;
  font-size: 1.5em;
  font-family: 'Oswald',sans-serif;
  color: #b2b2b2;
  line-height: 1.6;
}

#protitle {
  text-align: center;
  font-size: 3em;
  font-family: 'Oswald',sans-serif;
  color: #b2b2b2;
  line-height: 1.6;
}

#container {
  display: grid;
  grid-template-columns: repeat(2,50%);
  grid-template-rows: repeat(2,50%);
  grid-gap: 15px;
  padding: 20px;
  justify-content: center;
  align-content: center;
}

#container a:link {
  opacity: .5;
}

#container a:hover {
  opacity: 1;
}

#zappa {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid #50394c;
}

#survey {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid #50394c;
}

#techdoc {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid #50394c;
}

#landing {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid #50394c;
}

.footer {
  display: flex;
  flex-direction: row;
  font-size: 1.5em;
  justify-content: center;
  width: 100%;
  height: 7.5rem;
  background-color: #50394c;
  position: absolute;
  bottom: -5px;
}

.stripe-w {
  background-color: #fff;
  width: 100%;
  height: 150px;
}

.stripe-p {
  background-color: #50394c;
  width: 100%;
  height: 10px;
}

.contact-details {
  font-size: 2.4rem;
  /*text-shadow: 2px 2px 1px #1f1f1f;*/
  transition: transform 0.3s ease-out;
}

.nbutton {
  font-size: 1.5em;
  /*text-shadow: 2px 2px 1px #1f1f1f;*/
  transition: transform 0.3s ease-out;
}

.contact-details:hover {
  transform: translateY(8px);
  color: #b2b2b2;
}

.nbutton:hover {
  transform: translateY(8px);
  color: #b2b2b2;
}

.btn {
  display: inline-block;
  border-radius: .5rem;
  padding: 2rem;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous" />
<style>
  @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&family=Oswald:wght@300&display=swap');
</style>
<main id="page-container">

  <navbar id="navbar" class="navbar">
    <ul class="nav-list">
      <li class="nbutton">
        <a href="#welcome-section">About</a></di>
      </li>
      <li class="nbutton">
        <a href="#projects">Work</a>
      </li>
      <li class="nbutton">
        <a href="#contact">Contact</a>
      </li>
    </ul>
  </navbar>

  <section id="welcome-section" class="welcome">

    <div class="text" <h1 id="hello">
      Sample
      <br></h1>
      <p class="blurb">
        Lorem ipsum dolor sit amet,consectetur adipiscing elit. Sed semper accumsan nunc eget consequat. Donec aliquet metus at urna venenatis,sed malesuada dui vehicula. Curabitur imperdiet risus ac viverra consequat. Nam rutrum volutpat tortor quis condimentum.
        Donec vel mi tincidunt,fermentum neque ac,pretium quam. Curabitur viverra placerat finibus. Cras massa felis,eleifend vitae malesuada id,bibendum a felis. Sed fringilla luctus tortor vel vulputate. Vivamus congue,ante in tristique pharetra,dolor massa interdum felis,a volutpat purus velit non sem. Nulla id tristique est,euismod varius ex. Donec scelerisque scelerisque massa sed consequat. Vestibulum dictum tortor mattis tristique commodo. Aliquam malesuada risus et sem consectetur,id malesuada elit dapibus. Nullam sagittis varius eros ut placerat.<br><br> Nunc gravida consectetur massa,sit amet laoreet tellus. Nulla ullamcorper tincidunt consequat. Quisque pulvinar aliquam turpis. Morbi tellus ex,consequat non
        venenatis vitae,commodo blandit dolor. Nulla congue velit nec dui fermentum pellentesque auctor in est. Nulla dui quam,vehicula quis vestibulum quis,rutrum nec ex. Nunc iaculis diam quis quam efficitur luctus. Interdum et malesuada fames ac
        ante ipsum primis in faucibus. Etiam ante est,convallis ut accumsan ac,scelerisque quis erat. Morbi maximus quis erat eu finibus. Donec egestas et sapien ac pellentesque. Nulla quis aliquam libero. Ut dolor ligula,aliquam et nisi et,dapibus
        pharetra justo. Aenean ac libero id massa convallis vestibulum at non eros. In auctor diam neque,id pellentesque orci lobortis et.</p>
    </div>
  </section>

  <div id="protitle" class="project"> Web Projects </div>

  <section id="projects">

    <div id="container">
      <a href="https://codepen.io/ChelseaS/full/vYGejgo">
        <img id="zappa" target="_blank" src="https://imgur.com/ciNLs8H.png" alt="Zappa Tribute Project"></img>
      </a>

      <a href="https://codepen.io/ChelseaS/full/bGpLqLb">
        <img id="techdoc" target="_blank" src="https://imgur.com/yEBeaXW.png" alt="Technical Document">
        </img>
      </a>

      <a href="https://codepen.io/ChelseaS/full/yLOPGJV">
        <img id="landing" target="_blank" src="https://imgur.com/OvBZLKD.png" alt="Product Landing Page"></img>
      </a>

      <a href="https://codepen.io/ChelseaS/pen/wvGPMMa">
        <img id="survey" target="_blank" src="https://imgur.com/6AIMSiT.png" alt="gaming survey">
        </img>
      </a>
    </div>
  </section>

  <div class="stripe-w"></div>
  <footer id="contact" class="footer">

    <a id="profile-git" href="" target="_blank" class="btn contact-details"><i class="fab fa-github"></i> </a>

    <a id="profile-link" href="" target="_blank" class="btn contact-details"><i class="fab fa-linkedin-in"></i> </a>

    <a id="profile-be" href="" target="_blank" class="btn contact-details"><i class="fab fa-behance"></i> </a>

    <a id="profile-mail" href="" target="_blank" class="btn contact-details"><i class="fas fa-envelope"></i> </a>

  </footer>


</main>