0

我正在尝试创建一个包含 2 个 div 的 div：一个用于封面 img，另一个 div 带有一些文本。我很想只显示图像并在悬停时将其移开以显示文本。我使用绝对定位和 css 转换编写了这段代码，但出现了问题。

它在 Chrome 中运行良好，但在 Firefox 中却不行。

http://jsfiddle.net/5NHh2/4/

有人可以帮助我吗？我认为问题是溢出：隐藏设置为主 div。

非常感谢

这是html代码：

<div class="container">
<div class="info-box">
    <a href="#" title="">
        <div class="cover">
            <img src="http://placehold.it/180x267" />
        </div>
        <div class="info">
            <h5>A Title</h5>
            <p>Some text</p>
        </div>
    </a>
</div>
<div>​

这是CSS：

    .container {
        background:#000;
        text-align:center;
        padding:10px;
    }
    .info-box{
        text-align:left;
        overflow:hidden;
        position:relative;
        background:#ddd;
        display:inline-table;
        margin:0 10px 10px;
    }
    .info-box,
    .info-box img,
    .info-box .cover {
        width:180px;
        height:267px;
    }
    .info-box a {
        text-decoration:none;
        color:#333;
        display:block;
        position:absolute;
        top:0;
        left:0;
        width:180px;
        height:534px;
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }
    .info-box .info {
        box-shadow:inset 0 0 2px #000;
    }
    .info-box a:hover{
        top:-267px;
    }
    .info-box .info {
        width:160px;
        height:247px;
        padding:10px;
        position:relative;
    }
    .info {
        text-shadow:0 1px 0 #fff;
    }
    .info-box .info h5 {
        font-family:'Trebuchet MS',Arial,sans-serif;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        margin-bottom:10px;
    }
4

1 回答 1

0

补充.container, .info-box {overflow:hidden;}到最后。

在这里为我在 Firefox 中工作：http: //jsfiddle.net/5NHh2/5/

于 2012-10-30T22:38:53.393 回答