0

我试图让文字出现在这 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/

如果有人能告诉我我应该做什么，那将不胜感激。

4

2 回答 2

0

这个怎么样？

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;
}
于 2013-09-21T17:51:17.383 回答
0

您可能需要更改 HTML 结构并将每个图像和相关文本包装在一个元素中。

我使用了 figure / figcaption 结构，但它很容易适应。

代码笔示例

于 2013-09-21T18:07:50.693 回答