1

jQueryを使用して、マウスオーバー時に一部のコンテンツを上にフェードさせる単純な画像です。唯一の問題は、ホバーオーバーが有効になると、ホバーが div ガターにこぼれ、ホバーオーバーが実際のコンテナーよりも大きくなることです。

各画像はそのようにレイアウトされています

<li class="large-4 columns item">
<div class="description"><h1>Image hover</h1><a href="#"></a></div>
<img class="display" src="http://placehold.it/400x300">
</li>

ここで実際の例を見ることができます。 http://jsfiddle.net/QLUMH/

私がここでやっていることを修正/改善する方法についてのアイデアはありますか? 乾杯

4

5 に答える 5

2

デモ

ここにライブの例があります。幅と高さに 100% を指定しています。本当にオーバーフローします。

コード編集-

#portfolio .description {
        position: absolute;
        background: rgba(0,199,134,0.8);
        display: none;
        width: 400px;
        height: 300px;
    }
于 2013-03-11T06:01:19.977 に答える
1

問題は、説明が列全体に表示され、画像よりも幅が広いことです。画像と同じ幅に折りたたむ「内側の列」/コンテナーを追加すると、問題なく機能します。これを示すデモのフォークを作成しました。

次のように、各 .column.item 内にラッパー「ib」(内部ブロックを表します。これを適切な名前に変更します) を追加しました。

<div class="ib">
    <div class="description">
       <h1>Image hover</h1><a href="#"></a>
    </div>
    <img class="display" src="http://placehold.it/400x300">
</div>

そして、このラッパーをコンテンツに折りたたむための非常に単純な CSS ルールを作成しました。

.ib {
    display: inline-block;
    position: relative;
}
于 2013-03-11T07:41:41.783 に答える
0

あなたはあなたのスタイリングをしませんでしたli。問題は、foundation.cssで取得padding-leftしていることですpadding-right。margin-leftそれを削除して、代わりにを使用する必要がありますmargin-right。また、の幅も修正する必要がありますli。その.description100％の高さを取得します。したがって、自分のファイルに小さなcssを含める必要があります（foundation.cssは変更しないでください）。

#portfolio li.columns{
    /* You can use the width in '%' if you want to make the design fluid */
    width: 400px;
    padding: 0px;
    margin: 0px 0.9375em;
}

フィドル

于 2013-03-11T06:16:32.147 に答える
0

あなたはただtneのパディングを取り除く必要があるでしょうli

li{ padding:0 }

または、box-sizingプロパティを使用します。

`li {box-sizing：border-box; -moz-box-sizing：border-box; }

于 2013-03-11T07:59:42.750 に答える
0

CSの変更が役立ちます。

で同じものを更新しましたfiddle

CSSの変更により、

#portfolio .description {
    position: absolute;
    background: rgba(0,199,134,0.8);
    display: none;
    width: 400px;
    height: 300px;
}

#portfolio .description h1 {
    color: white;
    opacity: 1;
    font-size: 1.4em;
    text-transform: uppercase;
    text-align: center;
    margin-top: 20%;
width:400px;
height:300px;
overflow:hidden;
}

アップデート：

H1作成された余分なカッターとラッピングの問題 (一部) がある場合は、代わりにタグを使用してください。DIV正常に機能するはずです!

これで問題が解決することを願っています:)

于 2013-03-11T06:03:58.967 に答える