自上周我一直在建立一个HTML网站,我一直在使用鼠标悬停,使图像移动时,一个超链接将光标悬停,所以一切都显得不错,我主要是完成它,但有一些我不明白,我已创建3超链接与3鼠标悬停图像,但最后一个实际上悬停在网站的整个页面上。问题,鼠标悬停一整页
我不知道为什么或者它确实是这样,这就是为什么我在这里问你这个问题。你可以在我的HTML看看:
.college .image {
margin-left: 100px;
margin-top: 475px;
position: absolute
}
.college .imagesecond {
transform: translate(0px, 500px);
transition: transform 0.5s ease-in-out 0.2s;
border-radius: 8px;
overflow: hidden;
}
.college:hover>.imagesecond {
transform: translate(0, -200px);
}
.lycee .image {
margin-left: 700px;
margin-top: 500px;
position: absolute
}
.lycee .imagefourth {
transform: translate(0px, 300px);
transition: transform 0.5s ease-in-out 0.2s;
border-radius: 8px;
overflow: hidden;
}
.lycee:hover>.imagefourth {
transform: translate(0, -200px);
}
.formations .image {
margin-left: 1250px;
margin-top: 510px;
overflow: hidden;
}
.formations .imagesixth {
transform: translate(0px, 400px);
transition: transform 0.5s ease-in-out 0.2s;
border-radius: 8px;
overflow: hidden
}
.formations:hover>.imagesixth {
transform: translate(0, -900px);
}
body {
background: url("http://via.placeholder.com/571x179") 33em 0% fixed no-repeat;
position: fixed;
background-color: rgb(0, 85, 170);
}
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css.css" />
<title> sainte marie </title>
</head>
<body>
<div class="saintemarie">
<a href="college/collegesaintemarie.html">
<div class="college">
<img class="image imagefirst" src="http://via.placeholder.com/196x175" />
<img class="image imagesecond" src="http://via.placeholder.com/320x440" />
</div>
</a>
<a href="lycee/lyceesaintemarie.html">
<div class="lycee">
<img class="image imagethird" src="http://via.placeholder.com/183x140" />
<img class="image imagefourth" src="http://via.placeholder.com/320x440" />
</div>
</a>
<a href="c&formation/c&fsaintemarie.html">
<div class="formations">
<img class="image imagefifth" src="http://via.placeholder.com/172x153" />
<img class="image imagesixth" src="http://via.placeholder.com/320x440" />
</div>
</a>
</div>
</body>
</html>
你有什么想法,可以帮助我吗?或者改进我迄今为止所做的代码行?万分感谢!
嘿souzouker,下次请大家多一点关注你的写作(大小写),并使用编辑器按钮来打开你的代码堆栈段,这样我们就可以很容易地重现您的问题。这将帮助我们帮助你。顺便说一下,我看到的只有蓝色。您应该用[占位符图片](https://placeholder.com/)替换图片的src。我会这样做,但是你没有为你的图像指定'width'或'height'(你应该)。 – domsson
我认为它的所有蓝色,因为我使用我的电脑中的文件和图像,我可以尝试改变它占位符图像给我一分钟请 – souzouker
我认为它的工作,你可以看到它在整个页面上是如何工作的,你可以看到第3图像盘旋在整个页面execpt 2个orther超链接 – souzouker