0

2 つの div を含む div を作成しようとしています。1 つはカバー画像用で、もう 1 つはテキストを含む div です。画像のみを表示し、ホバー時に移動してテキストを表示したいと思います。絶対配置と CSS トランジションを使用してこのコードを書きましたが、何か問題があります。

Chrome では問題なく機能しますが、Firefox では機能しません。

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

誰かが私を助けることができますか？問題は、overflow:hidden がメイン 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 に答える