Question

我有一个主要的div，其位置是相对的，而且里面有2个div，其中的位置是绝对的，z index相应地在每个内部我加载了一些图像并给这些图像留下了悬停效果。

但是悬停只在最高的z-index的div上工作甚至它的父母背景都是透明的。我的Css看起来像

#main {
width:1000px;
height:500px;
position:relative;
} 

.gal_one {
width:800px;
height:400px;
position:absolute;
left:0;
top:0;
z-index:100;
}
.gal_one img {
margin-right:10px;
margin-bottom:10px;
float:left;
}
.gal_one img:hover {
border:1px solid #fff;      /* Working */
}

.gal_two {
width:800px;
height:400px;
position:absolute;
left:100px;
top:100px;
z-index:10;
}

.gal_two img {
margin-right:10px;
margin-bottom:10px;
float:left;
}
.gal_two img:hover {
border:1px solid #fff;      /* Not Working */
}

and the HTML part


<div id="main">
<div class="gal_one"> -- Loaded Images Here ---   </div>
<div class="gal_two"> -- Loaded Images Here ---   </div>
</div>

有什么想法吗？请俱乐部

Answer 1

这可能是因为你已经确定了不正确的宽度和高度属性。也许这里的Div块之一超过了第二块，并没有让它正确显示悬停效果。我实际上尝试了这里发布的代码，发现问题是叠加匹配。首先删除CSS中每个div的宽度和高度，然后尝试重新加载页面。

.gal_one {
position:absolute;
left:0;
top:0;
z-index:100;
}


.gal_two {
position:absolute;
left:100px;
top:100px;
z-index:10;
}

如果问题解决了，请更正宽度和高度，导致您使用绝对定位，以后可能会出现问题。

Answer 2

您有几个问题：

您的#main高度为500px，而您的div gal_one和gal_two的高度为400px，总共为800px
由于您的.gal_one和.gal_two已定位absolute元素，因此您必须将.gal_two从顶部置于400px而不是100px由于此.gal_two被.gal_one

然后将它设为这样：

#main {
width:1000px;
height:500px; // <---- this is less than the total of the .gal_one + .gal_two = 800px;
position:relative;
} 

.gal_one {
width:800px;
height:400px;
position:absolute;
left:0;
top:0;
z-index:100;
}
.gal_one img {
margin-right:10px;
margin-bottom:10px;
float:left;
}
.gal_one img:hover {
border:1px solid #fff;      /* Working */
}

.gal_two {
width:800px;
height:400px;
position:absolute;
left:100px;
top:400px; // <----issue is here make 100px to 400px from top
z-index:10;
}

.gal_two img {
margin-right:10px;
margin-bottom:10px;
float:left;
}
.gal_two img:hover {
border:1px solid #fff;      /* Now this is working */
}

在小提琴中试试这个： http://jsfiddle.net/YSr94/

css悬停背景加载div

2 个答案: