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;
}
它工作得很好......这是片段(我显然使用了来自谷歌的图像,其href指向目标_blank中的谷歌)
.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>
推荐阅读
- scala - Scala 比较 2 个 Spark 数据帧中的值
- javascript - 用`overflow:hidden`检测对象上的JS滚动
- javascript - 刺激:如何处理具有相同目标名称的重复项目
- sharepoint - 编辑表单时,从空白画布共享点查找字段创建不可见
- c# - 将变量从 http 请求解析为 c# 字符串时保留特殊字符
- vuejs2 - 将输入值直接传递给循环内的函数
- javascript - 在前面 reactJS 中获取后端数据
- java - 收集数据,同时共享进程
- javascript - 从 JavaScript 结果中获取 responseJson
- c# - 热键(包括鼠标按钮)C#