html - 悬停效果+ img上的超链接

我正在尝试将图片放置为链接，同时对图像产生一些悬停效果。悬停效果或链接目前均不起作用。

我尝试在不同的元素上使用：hover，尝试使用z-index，我尝试检查选择器的特异性，但是某些操作完全停止了悬停效果，但是我看不到出了什么问题。

<div class="fourthsection">
 <h1>Recent Projects</h1>

 <div class="projectpic-container">

    <div class="picbox">
        <div class= "imgBox">

          <a href={{url_for('portfolio.index')}}><img src={{url_for("static", filename="neuro-ai.jpeg")}} alt="Project1"></a>

        </div>
    </div>

    <div class="picbox">
        <div class= "imgBox">
          <a href={{url_for('portfolio.index')}}><img src={{url_for("static", filename="cloudtech.jpg")}} alt="Project2"></a>
        </div>
    </div>

    <div class="picbox">
        <div class= "imgBox">
          <a href={{url_for('portfolio.index')}}><img src={{url_for("static", filename="statistics.jpg")}} alt="Project3"></a>

        </div>
    </div>

    <div class="picbox">
        <div class= "imgBox">
          <a href={{url_for('portfolio.index')}}><img src={{url_for("static", filename="genetics.jpg")}} alt="Project4"></a>
        </div>
    </div>

 </div>
</div>

.fourthsection{
  background-color: rgb(247, 197, 164);
  position: relative;
  padding-top: 80px;
  padding-bottom: 60px;
  font-family: 'Nunito', sans-serif;
  z-index: -2;
  font-size: 10px;
}
.fourthsection h1{
  position: absolute;
  margin-left: 15%;
  margin-right: 15%;
  font-size: 1.8rem;
  letter-spacing: 3px;
  top:2%;
  padding-top:1.5%;

}

.projectpic-container{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-left: 13%;
  margin-right: 15%;
  padding-top: 45px;
  width: 80vw;
  height: 28 vh;

}
.projectpic-container .picbox{
  position: relative;
  width: 400px;
  height: 250px;
  margin: 8px;
}

.projectpic-container .picbox .imgBox{
  position: relative;
}

.projectpic-container .picbox .imgBox img{
  max-width: 100%;
  border-radius: 4%;
  -webkit-filter: sepia(100%);
    filter: sepia(100%);
    -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.projectpic-container .picbox .imgBox:hover img{
    transform: 0.3s ease-in;
    -webkit-filter: sepia(0);
    filter: sepia(0);
    cursor: pointer;
    -webkit-transform: 0.3s ease-in;
}

最佳答案

我实际上不知道您的整个页面，也不知道是否需要z-index，但是如果您从中删除z-index: -2

.fourthsection{
  background-color: rgb(247, 197, 164);
  position: relative;
  padding-top: 80px;
  padding-bottom: 60px;
  font-family: 'Nunito', sans-serif;
  z-index: -2;
  font-size: 10px;
}

它工作正常...这是代码段（我显然使用了来自Google的图像，目标_blank中的href指向了Google）

.fourthsection{
  background-color: rgb(247, 197, 164);
  position: relative;
  padding-top: 80px;
  padding-bottom: 60px;
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
}
.fourthsection h1{
  position: absolute;
  margin-left: 15%;
  margin-right: 15%;
  font-size: 1.8rem;
  letter-spacing: 3px;
  top:2%;
  padding-top:1.5%;

}

.projectpic-container{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-left: 13%;
  margin-right: 15%;
  padding-top: 45px;
  width: 80vw;
  height: 28 vh;

}
.projectpic-container .picbox{
  position: relative;
  width: 400px;
  height: 250px;
  margin: 8px;
}

.projectpic-container .picbox .imgBox{
  position: relative;
}

.projectpic-container .picbox .imgBox img{
  max-width: 100%;
  border-radius: 4%;
  -webkit-filter: sepia(100%);
    filter: sepia(100%);
    -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;

}

.projectpic-container .picbox .imgBox:hover img{
    transform: 0.3s ease-in;
    -webkit-filter: sepia(0);
    filter: sepia(0);
    cursor: pointer;
    -webkit-transform: 0.3s ease-in;
}

<div class="fourthsection">
 <h1>Recent Projects</h1>

 <div class="projectpic-container">

    <div class="picbox">
        <div class= "imgBox">

          <a href="https://www.google.com" target="_blank"><img src="https://besthqwallpapers.com/Uploads/25-8-2016/3005/thumb2-remains-of-bridge-lake-park-kromelow-kromelow-lake-rakott.jpg" alt="Project1"></a>

        </div>
    </div>
  </div>
</div>

关于html - 悬停效果+ img上的超链接，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58373606/