鼠標懸停不能使用jQuery

-1

我有一個jQuery鼠標懸停功能在我的網站（click here and scroll down to images with coloured blocks）。我已經注意到懸停狀態圖像是不可見的，雖然我玩過Z指數。什麼導致這個問題？鼠標懸停不能使用jQuery

下面是我的代碼片段。

<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); 
});

來源

2013-06-01 NewBoy

您的網站有一些JS似乎是jQuery的懸停事件，但它被註釋掉。您能否驗證並將腳本添加到帖子中？ – Fallexe

@Flex不知道是不是你降級了我，但它被評論的原因是bcos我正在測試下面給出的答案 – NewBoy

這工作：>>代替：$('.shirt-hover').hover(...) < <

$('.shirt-block img').mouseenter(function(){ 
    var $imgHover = $(this).next('.shirt-hover'); 
    $imgHover.width($(this).width()).height($(this).height()).stop().animate({opacity:1},200); 
}); 
$('.shirt-hover').mouseout(function(){ 
    $(this).stop().animate({opacity:0},200,function(){$(this).height(0)}); 
});

和刪除：在CSS z-index:100;爲.shirt-hover它是無用的，並使其越過底部DIV。

來源

2013-06-01 10:57:35

查看更新回答 –

yup！它在做什麼 – NewBoy

它在做什麼？它的工作與否？ –

只需更換

.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-01 10:31:45 Gautam3164

當然，但這樣做並不顯示懸停圖像，它只是顯示div背景？ – NewBoy

@NewBoy所以，你可以刪除：懸停僞類到你的CSS讓我們測試一下發生了什麼？ –

@ Gautam3164 sure – NewBoy

的僞選擇這樣的工作：.shirt:hover，.shirt-hover可能NEVE工作。

來源

2013-06-01 10:32:45

僞選擇總是使用冒號（：），從未破折號（-）。因此，shirt:hover將作爲替代。

而不是jQuery的.hover，你可以使用.mouseenter和.mouseleave。

來源

2013-06-01 10:52:36 samdy1

不行，在這種情況下這裏不行啊 –

@NewBoy檢查編輯它可能有幫助:) – samdy1

@ samdy1不行不行 – NewBoy

鼠標懸停不能使用jQuery

回答

相關問題