3

製品のリストをグリッド (960.gs) 形式で表示するページを作成しようとしています。COMP と一致させるには、ユーザーが LI の上にカーソルを置いたときに LI にドロップ シャドウを表示する必要があります。

ホバー時にドロップ シャドウを表示するのは簡単ですが、COMP でそのまま表示するのは難しい作業であることが判明したため、サポートが必要です。

以下は、一致させる必要がある COMP のスクリーンショットです。

ここに画像の説明を入力

1 から 10 までの数字はグリッドです。UL を使用して行を作成し、LI を使用して行に製品アイテムを表示しています。

<!-- loops n times for n rows -->
<UL class="container_10 clearfix">
    <!-- loops 5 times for 5 list items in a row -->
    <LI class="grid_2 product">
        <UL>
            <LI class="prodImg clearfix">...</LI>
            <LI class="prodTitle clearfix">...</LI>
            <LI class="prodPrice clearfix">...</LI>
            <LI class="prodPromo clearfix">...</LI>
            <LI class="prodReviews clearfix">...</LI>
        </UL>
    </LI>
</UL>

スクリーン ショットでわかるように、影はグリッド レイアウトから流れ出します....ここでそれを組み込む方法の手がかりが得られました。

編集: プロジェクトの要件に従って、最新のブラウザーのみをサポートしているため、IE6 やその他のジャンク ブラウザーについて心配する必要はありません。CSS3 の使用が許可されています :)

4

3 に答える 3

2

LI タグに追加する場合position:relative、その中に html 要素を追加することができます。この要素は絶対に外側に配置され、製品の画像と情報の下に配置されます。

別の html 要素を追加したくない場合は、 を使用li:afterして追加することもできます。これが十分に明確かどうかはわかりません。そうでない場合は、質問してください。実際の例を提供しようとします。

于 2011-10-25T21:07:02.580 に答える
1

順応性の低いブラウザーに対応する必要がないため、疑似要素と CSS の box-shadow を組み合わせて使用​​します。

CSS:
.product {
  position: relative;
}
.product:after {
  content: '';
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
}
.product:hover:after {
  box-shadow: 0 0 5px #CCC;
}

宣言は、要素に対して相対的に配置されたドキュメントのフローの.product:after外側に要素を作成します.product。.product:hover:after宣言により、ドロップ シャドウが作成されます。モックアップに合わせて寸法などを調整します。

例を次に示します: http://jsfiddle.net/blineberry/SMqDx/

于 2011-10-25T21:43:01.183 に答える
0

box-shadowホバーしたときに製品ボックスに影を付けるために使用できませんか?

.product li:hover{
    box-shadow: 0 0 5px black; /* Whatever size shadow you need */
}

同様のコードの例: http://jsfiddle.net/6zcqZ/

編集

<spread>以下に定義されているように、ボックスの影のプロパティを使用したいと思うかもしれません:

box-shadow: [x-offset] [y-offset] [blur value] [spread value] [color];

したがって、上記の代わりに、次のように単純にスプレッド値を追加できます。

box-shadow: 0 0 5px 5px black;
于 2011-10-25T21:55:12.073 に答える