1

残りのレイアウトに影響を与えないホバーオーバーイベントを作成しようとしています。z-indexがそれを行う方法のようですが、私はそれを機能させることができません。私はcssに固執しようとしていますが、jQueryは実行可能です。

フルアプリ：http：//jsfiddle.net/9cRdq/

html

<div class="big-square" id="br">
    <div class="little-square" id="br-tl"></div>
    <div class="little-square" id="br-tr"></div>
    <div class="little-square" id="br-bl"></div>
    <div class="little-square" id="br-br"> </div>
</div>

css

.big-square
{
    position: relative;
    z-index: 1;
    font-size: 2em;
    float: left;
    width: 30%; 
    min-width: 4em;
    min-height: 4em;
    margin: 0 2% 2% 0;
    background: #000;
}
.little-square
{
    position: relative;
    z-index: 1;
    cursor: pointer;
    float: left;
    width: 48%; 
    height: 48%;
    background: #cd2626;
}
.little-square:hover
{
    z-index: 1000;
}

jquery

$(document).ready(resizeBigSquare);
window.onresize = resizeBigSquare;
function resizeBigSquare() {
    $('.big-square').css(
        {
            'height': ($('.big-square').width() * .85) + 'px',
            'line-height': ($('.big-square').width() * .85) + 'px'
        });
    $('.little-square, .rectangle-top, .rectangle-bottom').css(
        {
            'line-height': $('.little-square').height()+ 'px'
        });
}
4

1 に答える 1

1

ホバーのz-index変更は問題なく機能しています。実際、これは、を使用して機能していることを示すフィドルbox-shadowです。div.little -squareは、その上にカーソルを合わせると、実際にはピアの上にあります。そうしないと、他の正方形のbox-shadow後ろにクリップします。

z-indexz軸のスタック順序にのみ影響し、他には何も影響しないことに注意してください（サイズ、色など）

ホバー時に（グリッドを壊さずに） div.little-squareのサイズを変更する場合は、代わりに各正方形の内側に子要素を作成することを検討してください。次に、position:absolute新しい子要素に適用し、小さな正方形のいくつかのプロパティをその要素に転送し、それに応じてホバー状態のスタイルを設定します。このフィドルには、私が話していることの例があります。

于 2012-08-22T19:39:35.240 に答える