1

我有一个主 div，它的位置是相对的，在里面我加载了另外 2 个 div，它的位置是绝对的，z 索引相应地在每个里面我加载了一些图像并给这些图像一个悬停效果。

但是悬停只在最高 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>

任何想法 ？请俱乐部

4

2 回答 2

2

这可能是因为您设置的宽度和高度属性不正确。也许这里的 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;
}

如果问题解决了，那就更正宽度和高度，因为你使用绝对定位，以后可能会出现问题。

于 2013-01-01T11:59:37.607 回答
1

你有几个问题：

  1. 您#main的500pxdiv高度为gal_one_gal_two400px800px
  2. 作为您的和.gal_one定位的元素，因此您必须从顶部定位到不定位，因为它被覆盖.gal_twoabsolute.gal_two400px100px.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/

于 2013-01-01T12:16:03.320 回答