2017-06-22 128 views
0

自上周我一直在建立一个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>

你有什么想法,可以帮助我吗?或者改进我迄今为止所做的代码行?万分感谢!

+0

嘿souzouker,下次请大家多一点关注你的写作(大小写),并使用编辑器按钮来打开你的代码堆栈段,这样我们就可以很容易地重现您的问题。这将帮助我们帮助你。顺便说一下,我看到的只有蓝色。您应该用[占位符图片](https://placeholder.com/)替换图片的src。我会这样做,但是你没有为你的图像指定'width'或'height'(你应该)。 – domsson

+0

我认为它的所有蓝色,因为我使用我的电脑中的文件和图像,我可以尝试改变它占位符图像给我一分钟请 – souzouker

+0

我认为它的工作,你可以看到它在整个页面上是如何工作的,你可以看到第3图像盘旋在整个页面execpt 2个orther超链接 – souzouker

回答

1

您需要使用lefttop而不是margin-leftmargin-top。图像的边距导致a标签的尺寸扩大。

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

+0

你是对的!我不知道保证金实际上是这样做的,非常感谢你! – souzouker

+0

没问题。边距本质上是在元素周围增加额外的空间,这将增加父元素的大小。 – WizardCoder

0

在你关闭一个标签之前甲肝关闭开幕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> 

尝试一个后关闭它,看它是否得到所有正确的

+0

感谢指出了这一点,我在我的代码固定它, 不幸的是,它没有固定我的问题,但你^^感谢 – souzouker

+0

可以使用http图像并附上代码片段,以便我可以更好地了解它 –

0

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