1

私はnivoスライダーのセットを持っています。それぞれに影を付けたかったので、ラッパーと絶対位置の影を作成しました。

<div class="nivo-wrapper">
   (my slider code here)
   <img src="shadow.png" class="nivo-shadow" alt=""/>
</div>

CSS：

.nivo-wrapper {
    position: relative;
    padding: 0 0 30px 0;
    display: inline-block; /*inline block so it has the same width as slider */
    border: solid 1px red;
}

.nivo-shadow {
    position: absolute;
    left: 0;
    width: 100%; /* absolutely positioned 100% wide so fits its parent */
}

だから私は自動的に幅を変える影のあるとても素敵なスライダーのセットを持っています。

問題は、スライダーにカーソルを合わせるたびに、カーソルを合わせたスライダーの下のスライダーの位置が変わり（10ピクセル上に「ジャンプ」）、マウスアウトすると「適切な」位置に変わることです。

nivo-shadowsの位置を相対/静的に変更すると停止します（ただし、この方法ではシャドウの幅が間違っています）。

何が起こるかをお見せしたいのですが、jsfiddleでNivoスライダーを動作させることができませんでした（すべての.jsおよび.cssライブラリをコピーして貼り付けた後でも）。

4

3 に答える 3

1

それを見ずに..私はこれを言います：

FireBug を使用して CSS をチェックし、:hover でのジャンプの原因を確認する必要があります。何かが原因であるに違いありません。スライド コンテナーの 1 つの高さが正しくないかのように聞こえます。デザインを台無しにすることなく、.nivo-wrapper に高さを与えることができますか?

また、シャドウに top:0 または bottom:0 を使用してみましたか? 効果がありそうでした..

于 2011-04-05T19:12:36.767 に答える
0

リンクのCSSルールを追加する必要があると思います.nivo-shadow:hover { position: absolute; left: 0px; width: 100%; }ので、ホバーするとそこにとどまります...

于 2011-09-12T01:16:16.360 に答える
0

デフォルトでは、画像の影の位置とブロック モデル、つまりReplaced Elementを修正する必要があると思いinlineます。

 .nivo-shadow {
    display:block; /*<--update here*/
    position: absolute;
    left: 0;
    bottom:0; /*<--update here: you must declare it, or top */
    width: 100%; /* absolutely positioned 100% wide so fits its parent */
 }

実際、1 つの絶対配置要素は、「上」、「左」、「右」、または「下」プロパティによって提供される座標に従って配置されます。

于 2014-07-29T13:13:16.940 に答える