2

製品のリストがあります。製品の上にマウスを置くと、ボックスが拡大し、製品の他の画像のサムネイルを見ることができます。

私はcssだけで解決策を見つけました：

HTML：

<div class="row">
    <div class="boxProdotto"> ... <span class="thumbs"><img><img></span></div>
    <div class="boxProdotto"> ... <span class="thumbs"><img><img></span></div>
    <div class="boxProdotto"> ... <span class="thumbs"><img><img></span></div>
    <div class="boxProdotto"> ... <span class="thumbs"><img><img></span></div>
</div>
<div class="row">
    ... other row with 4 boxes
</div>

CSS：

.row {
    margin-bottom: 13px;
    clear: both;
    position: relative;
    float: left;
}
.boxProdotto{ 
    position: relative;
    width: 175.5px;
    margin-left: 13px;
    float: left;
    background: #FFF;
}
.boxProdotto .thumbs {
    display: none;
}
.boxProdotto:hover{
    border: 2px solid #9d3951;
    border-radius: 3px;
    padding: 11px;
    position: relative;
    left: 0;
    margin: -13px -13px -200px 0;
    z-index: 200;
}
.boxProdotto:hover .thumbs {
    display: block;
}

マウスオーバー状態のボックスの高さは、サムネイルの数に応じて変化するため、JQueryを使用してマージンボトムを計算することにしました。

JQuery：

// Set the attribute data-h with the normal height of the box
$(".boxProdotto").each(function(){
    $(this).attr('data-h', $(this).height());
});

// on mouse over set the margin bottom calculated
$(".boxProdotto").mouseover(function(){
    // margin-bottom = boxHeight - boxHeightOnMouseOver - border - paddingBottom
    $(this).css('margin-bottom', ( $(this).attr('data-h') - $(this).height() - 2 - 11));
}).mouseout(function(){
    $(this).css('margin-bottom', 0);
});

このソリューションはすべてのブラウザ（Firefox、Chrome、Safari Mac、Win）で動作しますが、IE8とIE9には謎があります。IE10でうまく機能している間...IE7私はそれをテストできませんでしたが、私はそれが機能しないと思います。

IE8では、適用される負のマージンは効果がないようです。しかし、奇妙なことに、最初の製品の画像の上にマウスを置くと、ボックスが拡大し、次の行が下に移動することがわかります。しかし、サムネイルの上にマウスを移動すると（同じボックスの上にマウスを置くと）、魔法のように機能し、margin-bottomが適用されます！

見てみると、IEマージンネガティブとJquery onmouseover / onmouseoutに関連する多くのバグ/問題が見つかりましたが、私の場合は両方が混在しているようです。

また、IEでは、FantasticDeveloperToolsを使用してページをデバッグすることは事実上不可能です。

4

1 に答える 1

1

あなたがやろうとしているのは、条件ステートメントを使用してIE8を検出し、jQueryのクラスをmargin-bottomを必要とする要素に追加することです。

 <!--[if gte IE 8]>
    <style>
    .marginBottomIE { bottom: -200px; }
    </style>
<![endif]-->

Modernizr を使用している場合は、ボディに追加されたクラス .ie8 を使用してブラウザーを検出するだけです。

jQuery

 if($('.ie8').length > 0){
        $('.boxProdotto').addClass('marginBottomIE');
    }

次に、margin-bottom を計算した後に単純な if 条件を追加できます。次に例を示します。

if(marginBottom < 0){ $('.boxProdotto').addClass('marginBottomIE'); }

CSS

 .marginBottomIE { bottom: -200px; }

お役に立てれば ：）

于 2013-11-26T20:54:54.690 に答える