我试图让文本在悬停时显示在这 4 张图片下方而不改变它们的位置，并且还使这些图片可点击(超链接)。
目前图像处于我想要的位置，但当我将鼠标悬停在它们上方时，它们会重新定位，使其余图像位于第一张图像下方，然后文本出现在图像右侧.我做错了什么？
我还希望在这些图像下方包含一段文字。
这是 CSS 文件 (fadeintext.css)
#ex3
{ width: 1280px; height: 256px; line-height: 0px; color: transparent; font-size: 50px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; text-transform: uppercase; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; }
#ex3:hover { line-height: 256px; color: #575858; } #ex3 img{ float: left; margin: 0 15px; }
HTML 页面:
<html><head>
<head>
<meta charset="utf-8">
<meta name="description" content="description">
<title>REDACTED</title>
<link rel="stylesheet" type="text/css" media="screen" href="fadeintext.css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css"></style></head>
</head>
<div id="ex3">
<img src="best/instagram.png"><p>Instagram</p>
<img src="best/twitter.png"><p>Twitter</p>
<img src="best/gplus.png"><p>Google+</p>
<img src="best/steam.png"><p>Steam</p>
</div>
</html>
这是页面和 CSS 样式表的组合 http://www.REDACTED/
如果有人能告诉我应该怎么做，将不胜感激。
最佳答案
this怎么样？ ？
HTML:
<div id="ex3">
<div>
<img src="http://www.example.com/best/instagram.png" />
<p>Instagram</p>
</div>
<div>
<img src="http://www.example.com/best/twitter.png"/>
<p>Twitter</p>
</div>
<div>
<img src="http://www.example.com/best/gplus.png"/>
<p>Google+</p>
</div>
<div>
<img src="http://www.example.com/best/steam.png" />
<p>Steam</p>
</div>
</div>
CSS:
#ex3 {
width: 1280px;
height: 256px;
line-height: 0px;
color: transparent;
font-size: 50px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
text-transform: uppercase;
}
#ex3 div:hover {
line-height: 0px;
color: #575858;
}
p {
text-align: center;
}
#ex3 div {
float: left;
margin: 0 15px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#ex3 div:nth-of-type(2) {
margin-top: 50px;
}
#ex3 div:nth-of-type(3) {
margin-top: 100px;
}
#ex3 div:nth-of-type(4) {
margin-top: 150px;
}
关于html - 在级联图像下淡入文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18935634/