0

わかりました、次のコードがあります: https://jsfiddle.net/7u1aLxaw/

問題は、画像にカーソルを合わせると、その画像に固有の名前のオーバーレイが表示されることです。ただし、名前が画像の幅よりも長い場合、すぐ右側の画像が押しのけられ、オーバーレイは画像の中央に配置されません。両側ではなく、ちょうど右側に拡張されます。

オーバーレイを中央に配置し、両側の div に影響を与えないようにする方法がわかりません。

※使ってdisplay: noneみたけど、CSS3のトランジションを残したい。を使用display: noneして要素を完全に削除すると、CSS3 トランジションが削除されます。

何か案は？

4

2 に答える 2

0

jsFiddle の作業: http://jsfiddle.net/q8SER/3/

それを機能させるには、たくさんのものを変更する必要がありました。

まず、HTML の構造を変更し、アイコン div の前にオーバーレイ div を配置しました。

新しいオーバーレイ CSS は次のとおりです。

.item_overlay {
    position: absolute;
    z-index: 1;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

さて、内側の div (オーバーレイ) が親の div からオーバーフローするため、従来の自動マージンでは中央に配置できなかったため、jQuery ソリューションを実装しました。

JS コード:

$(".item_overlay").each( function() {
    var offset = ($(this).parent().width() - $(this).width()) / 2;
    $(this).css("left", offset + "px");
});

それが役立つことを願っています。

于 2013-08-19T00:32:36.903 に答える