0

だから私はこれらの2つのdivをインラインで隣り合わせにしています

http://jsfiddle.net/A5Jc7/60/

html:

<div>
    <div class="box1"></div>
    <div class="box2"></div>
</div>

CSS:

.box1 {
    width:200px;
    min-height:200px;
    background:blue;
    float:left;
    margin:20px 0 0 0;
}
.box1:hover {
    background: white;
    box-shadow: 0px 0px 5px 5px #888888;
    height:200px;
    margin:20px 0 0 0;
}
.box2 {
    width:200px;
    min-height:200px;
    background:blue;
    float:left;
    margin:20px 0 0 0;
}
.box2:hover {
    background: white;
    box-shadow: 0px 0px 5px 5px #888888;
    height:200px;
    margin:20px 0 0 0;
}

左の div にカーソルを合わせると、右の div の下にある影が表示されます。右の div にカーソルを合わせると、影が左の div の上に表示されます。なぜこのように動作するのですか？影を同じにしたい。z-index トリックを試しましたが、うまくいかないようです。何か案は？

4

5 に答える 5

1

Z-index は、絶対的または相対的に配置された要素に対してのみ機能します。

その後、各ボックスに次を追加します。

position:relative;

そしてホバーへの以下：

z-index:1;

影をオブジェクトの親の後ろに置きたい場合は、次を使用してください。

z-index:-1;

例: http://jsfiddle.net/charlescarver/A5Jc7/64/

この方法では、奇数の z-index を使用したり、正しくスタイルを設定するためにさらに多くの CSS を必要とするボックスの絶対位置を設定したりする必要はありません。

于 2013-07-25T16:01:28.367 に答える
0

http://jsfiddle.net/A5Jc7/65/

.box1{
    width:200px;
    min-height:200px;
    background:black;
    float:left;
    margin:20px 0 0 0;
    z-index: 1; 
    position: relative;
}

.box1:hover{
    background: white;
    box-shadow: 0px 0px 5px 5px #888888;    
    height:200px;
    margin:20px 0 0 0;
    z-index:2;
}

ホバー時の位置と z-index を両方のアイテムに追加しました。

于 2013-07-25T15:52:12.433 に答える