1

位置が相対的なメインの div があり、その中に絶対位置の div を 2 つ追加し、それに応じて 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 ブロックの 1 つが 2 番目のブロックを超えて、ホバー効果を正しく表示できない可能性があります。ここに掲載されているコードを実際に試してみたところ、問題はオーバーレイ マッチングであることがわかりました。最初に 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. あなたのdivの高さは高さで、高#mainさの合計は500pxgal_onegal_two400px800px
  2. あなたの.gal_one要素が配置されているので.gal_two、これがオーバーレイされているため、上からそうでない場所に配置する必要がありますabsolute.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 に答える