Html 悬停效应+；img上的超链接_Html_Css_Flask_Hyperlink

Html 悬停效应+；img上的超链接

html css flask hyperlink

Html 悬停效应+；img上的超链接,html,css,flask,hyperlink,Html,Css,Flask,Hyperlink,我正在尝试将图片作为链接，同时在图像上有一些悬停效果。悬停效果和链接目前都不起作用我试着使用：悬停在不同的元素上，我试着使用z-index，我试着检查选择器的特异性，但有些东西完全停止了悬停效果，但我看不出哪里出了问题近期项目我实际上不知道你的整个页面，也不知道是否需要z-index，但是如果你从中删除z-index:-2 .fourthsection{ background-color: rgb(247, 197, 164); position: relative; pa

我正在尝试将图片作为链接，同时在图像上有一些悬停效果。悬停效果和链接目前都不起作用

我试着使用：悬停在不同的元素上，我试着使用z-index，我试着检查选择器的特异性，但有些东西完全停止了悬停效果，但我看不出哪里出了问题


近期项目

我实际上不知道你的整个页面，也不知道是否需要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;
}

它工作得很好…这是一个片段（我显然使用了一个来自谷歌的图像，在target\u blank中带有指向谷歌的href）

.fourthsection{
背景色：rgb（247197164）；
位置：相对位置；
填充顶部：80px；
填充底部：60px；
字体系列：“Nunito”，无衬线；
字体大小：10px；
}
.第四节h1{
位置：绝对位置；
左边距：15%；
右边距：15%；
字体大小：1.8rem；
字母间距：3px；
最高：2%；
垫面：1.5%；
}
.projectpic容器{
显示器：flex；
弯曲方向：行；
证明内容：周围的空间；
左边缘：13%；
右边距：15%；
填充顶部：45px；
宽度：80vw；
高度：28VH；
}
.projectpic容器.picbox{
位置：相对位置；
宽度：400px；
高度：250px；
利润率：8px；
}
.projectpic容器.picbox.imgBox{
位置：相对位置；
}
.projectpic container.picbox.imgBox img{
最大宽度：100%；
边界半径：4%；
-webkit过滤器：乌贼墨（100%）；
过滤器：乌贼墨（100%）；
-webkit转换：0.3s易入易出；
过渡：0.3s缓进缓出；
}
.projectpic container.picbox.imgBox:悬停img{
转换：0.3s易用；
-webkit过滤器：乌贼墨（0）；
过滤器：乌贼墨（0）；
光标：指针；
-webkit转换：0.3s易用性；
}


近期项目

我的结论与阿莱索兹相同。移除z索引：-2从.fourthsection设置规则，一切正常。将该设置放回原位，悬停动作将被中断

<!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>

{url\u for（'portfolio.index'）}

和

{url\u for（“static”，filename=“neuro ai.jpeg”）}

里面是什么？这是一个flask web框架，但它与网站的路径和图片的路径是一样的，只是该框架的格式不同而已布拉沃，谢谢，我已经在这方面做了两天了。它的存在是有原因的，但我当时用了不同的方式。谢谢，您可能需要将.projectpic容器规则中的“高度：28vh；”改为“高度：28vh；”。数量和单位之间的间隔可能会在以后引起问题。

<!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>

.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; 
}