-1

私は自分のサイトに jQuery のマウス オーバー ホバー機能を組み込みました (ここをクリックして、色付きのブロックの画像まで下にスクロールします)。Z インデックスをいじってみましたが、ホバー状態の画像が表示されないことに気付きました。この問題の原因は何ですか?

以下は私のコードのスニペットです。

<div class="shirt-block" style="background:#333334;">
    <figure>
        <img class="shirt col-img-inner" src="img/B0713011sf2.jpg" alt="alt"/>
    </figure>
</div>

.shirt-block {
    width:47%;
    float:left;
    margin:0; padding:0;
    margin-left:2%;
    min-width:200px;
    max-width:600px;
    position:relative;
}

.shirt-block > figure { margin:0; padding:0; height:100%; position:absolute; top:0; right:0; width:100%; }


.shirt-sizer { width:100%; /* same as figure width */ }

.shirt {
    width:100%;
    position:absolute;
    top:0;
    right:0;
}

.shirt-hover {
    background:url(http://www.lybstore.com/img/home-hover-bg.png);
    background-size:cover;
    position:absolute;
    top:0; right:0;
    z-index:100;
    width:100%;
    height:100%;
    opacity:0;
}


$('figure').append('<div class="shirt-hover"/>');

var $sizer = $("<img/>",  {src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF8AAABkCAMAAADXLxypAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAACBJREFUeNrtwTEBAAAAwiD7p14Hb2AAAAAAAAAAAABcAiWAAAEKyWyqAAAAAElFTkSuQmCC"}).addClass("shirt-sizer");

$('.shirt-block').append($sizer);

$('.shirt-hover').hover(function(){
    $(this).stop().animate({opacity:1},200);
},function(){
    $(this).stop().animate({opacity:0},200);
});
4

4 に答える 4

1

交換するだけ

.shirt-hover {

と

.shirt:hover {

だから、このようにする必要があります

.shirt:hover {
      background:url(http://www.lybstore.com/img/home-hover-bg.png);
      background-size:cover;
      position:absolute;
      top:0; right:0;
      z-index:100;
      width:100%;
      height:100%;
      opacity:0;
  }
于 2013-06-01T10:31:45.650 に答える
0

疑似セレクターは次のように機能します: .shirt:hover、.shirt-hover決して機能しませんでした。

于 2013-06-01T10:32:45.547 に答える