0

所以我让这两个 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 回答
0

因为你的阴影的偏移量覆盖了第一块，

如果您像box-shadow: 5px 0px 5px 5px #888888;完成一样编辑第二个框阴影中的 x 位置。

但是如果你想保持对称性，你也必须改变第一个阴影偏移box-shadow: -5px 0px 5px 5px #888888;

于 2013-07-25T15:52:47.653 回答
0

您可以使用绝对定位来使 z-index 正常工作。

.box0 {
position:relative;
width:400px;
height:200px; 
}

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

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

.box2{
width:200px;
min-height:200px;
background:black;
position:absolute;
margin:20px 0 0 0;
z-index:1
z-index: 1;
right:0;
 top:0           
}

.box2:hover{
background: white;
box-shadow: 0px 0px 5px 5px #888888;  
height:200px;
margin:20px 0 0 0;
    z-index:5
}
于 2013-07-25T15:57:07.503 回答
0

用于z-index: -1.box1和.box2z-index: -11 : hover

也可position:relative用于两个框，因为您需要具有 z-index 属性的位置。

像这样：

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

.box2:hover{
background: white;
box-shadow: 0px 0px 5px 5px #888888;  
height:200px;
margin:20px 0 0 0;
z-index: -11;
position: relative;
}

小提琴：http: //jsfiddle.net/A5Jc7/63/

这个想法是在 box1 下方悬停期间推动 box2 的阴影。

于 2013-07-25T15:57:50.600 回答