Question

自上周以来，我一直在创建一个HTML网站，当光标悬停在超链接上时，我一直在使用鼠标悬停来移动图像，所以一切看起来都很好，我大部分时间都完成了但是那里是我不太了解的东西，我创建了3个超链接，有3个鼠标悬停图像，但最后一个实际上悬停在网站的整个页面上。

我不知道为什么或在哪里这样做，这就是为什么我在这里问你这个问题。你可以看看我的HTML：

＆＃13;

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

＆＃13;

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

＆＃13;

你有什么想法可以帮助我吗？或者改进我到目前为止所做的代码行？谢谢你！

Answer 1

您需要使用left和top而不是margin-left和margin-top。图像的边距导致a标记扩大。

＆＃13;

.college .image {
  left: 100px;
  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 {
  left: 700px;
  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 {
  left: 1250px;
  top: 510px;
  position:absolute;
  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, -200px);
}

body {
  background: url("http://via.placeholder.com/571x179") 33em 0% fixed no-repeat;
  position: fixed;
  background-color: rgb(0, 85, 170);
}

＆＃13;

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

＆＃13;

Answer 2

在最后一个你关闭了开放的saintemarie div，然后关闭了一个标签，请看这里

 <a href="c&formation/c&fsaintemarie.html">
        <div class="formations">
            <img class="image imagefifth" src="formation.png" />
            <img class="image imagesixth" src="pepepls.gif" />
        </div>
     /* closed before a */   </div>  
    </a>

尝试在a之后关闭它并查看它是否可以正常

Answer 3

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

鼠标悬停在整个页面上的问题

3 个答案: