【发布时间】：2017-06-22 14:45:09
【问题描述】：
自上周以来，我一直在创建一个 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，下次请多注意您的写作（大写），并使用编辑器按钮将您的代码转换为 Stack Snippet，以便我们轻松重现您的问题。这将帮助我们帮助您。顺便说一句，我看到的都是蓝色的。您应该将图像
srcs 替换为placeholder images。我会这样做，但你没有为你的图片指定width或height（你应该这样做）。 -
我认为它全是蓝色的，因为我使用计算机中的文件和图像我可以尝试用占位符图像更改它，请稍等一下
-
我认为它有效，您可以在整页上看到它是如何工作的，您可以看到第三张图片悬停在整个页面上，除了 2 个或其他超链接
标签： html css hover mousehover