0

hover画像を作成して、画像と画像情報を拡大しようとしています。 使用した他の画像で覆われるのではなく、ホバーされた画像divを他の画像の上に置きたいのですが、うまくいかないようです。良いアイデアを思いついた人はいますか？どうもありがとう。divdivz-index

<div class='imgDiv'>
    <img src='a.jpg' />
    <p>hahaha</p>
</div>

<div class='imgDiv'>
    <img src='b.jpg' />
    <p>hahaha</p>
</div>

<div class='imgDiv'>
    <img src='c.jpg' />
    <p>hahaha</p>
</div>

<div class='imgDiv'>
    <img src='d.jpg' />
    <p>hahaha</p>
</div>

......
.....I have so many images divs....

CSS

.imgDiv{
float:left;
}

.imgDiv:hover{

//part of the enlarge div will be covered by other image divs...
-webkit-transform:scale(1.45, 1.45);
-moz-transform:scale(1.45, 1.45);
-o-transform:scale(1.45, 1.45);
-ms-transform:scale(1.45, 1.45);
transform:scale(1.45, 1.45)


}

Jクエリ

$('.imgDiv').hover(function(){

  //not working...
  $(this).css('z-index','999');       

})
4

1 に答える 1

1

がz-index機能するには、 であるposition必要がありますabsolute。おそらく、ホバー時に絶対位置を切り替え、topおよびleft属性を設定して、div が所定の位置に留まるようにする必要があります。

div を浮かせていない方が簡単です。

絶対位置は、最初に配置された要素に対する相対位置であることに注意してください。body 要素である必要はありません。positionこれは、セットが何かに設定されている最初の親に相対的です。

編集
@ahren が彼のコメントで指摘したように、私z-indexはposition: absolute;.

そうは言っても、JavaScript の部分を除いてコードにフィドルを設定しましたが、期待どおりに動作するようです。動作は chrome / firefox / ie9 と同じです。html/css の他の部分が問題を引き起こしているのではないでしょうか? それとも私は質問を誤解しましたか？

于 2012-08-08T02:17:38.667 に答える