我正在尝试将图片作为链接放置,同时对图像产生一些悬停效果。悬停效果或链接目前均不起作用。
我尝试在不同的元素上使用: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;
}
答案 0 :(得分:1)
我实际上不知道您的整个页面,也不知道是否需要z-index,但是是否从{p>中删除了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>
答案 1 :(得分:0)
我的结论与亚历克斯相同。 从 .fourthsection 规则中删除 z-index:-2; 设置,一切正常。放回该设置,悬停动作就会中断。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="hu" xml:lang="hu" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Page Title</title>
<link href="__imghover.css" type="text/css" rel="stylesheet" />
</head>
<body>
<main>
<div class="fourthsection">
<h1>Recent Projects</h1>
<div class="projectpic-container">
<div class="picbox">
<div class="imgBox">
<a href="portfolio.index"><img src="http://keve.maclab.org/pub/tmp/demopic.jpg" alt="Project1" /></a>
</div>
</div>
<div class="picbox">
<div class="imgBox">
<a href="portfolio.index"><img src="http://keve.maclab.org/pub/tmp/demopic.jpg" alt="Project2" /></a>
</div>
</div>
<div class="picbox">
<div class= "imgBox">
<a href="portfolio.index"><img src="http://keve.maclab.org/pub/tmp/demopic.jpg" alt="Project3" /></a>
</div>
</div>
<div class="picbox">
<div class= "imgBox">
<a href="portfolio.index"><img src="http://keve.maclab.org/pub/tmp/demopic.jpg" alt="Project4" /></a>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
请注意:我用静态img网址替换了烧瓶引用。
.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: 28vh;
}
.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 img:hover {
transform: 0.3s ease-in;
-webkit-filter: sepia(0);
filter: sepia(0);
cursor: pointer;
-webkit-transform: 0.3s ease-in;
}