簡單的jquery標題不起作用

我試圖做一個簡單的小標題框，當你將鼠標懸停在元素上時，它會褪色到元素總寬度的50％，並且一直呆在那裏，直到你將鼠標移出元素。簡單的jquery標題不起作用

它有點工作，但問題是當我將鼠標移動到.caption div內的鏈接上時，它正在淡入淡出（閃爍），幾乎就像是將標題視爲單獨的元素，即使它處於主要元素。它也似乎隨機閃爍幾次，如果我快速鼠標和鼠標懸停。

這裏是我的CSS：

.thumbs li { 
    float: left; 
    margin-right: 20px; 
    width: 305px; 
    height: 200px; 
    position: relative; 
    border: 1px solid red; 
} 
.thumbs li img { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    z-index: 1; 
} 
.thumbs li .caption { 
    position: absolute; 
    width: 50%; 
    height: 100%;; 
    display: none; 
    z-index: 2; 
    text-align: center; 
    color: #ffffff; 
    background: rgba(0, 0, 0, .75); 
} 
.thumbs li .caption a { 
    color: #ffffff; 
}

這裏是我的jQuery：

$('.thumbs li').mouseover(function() {  
    $(this).find('.caption').fadeIn(500); 
}); 

$('.thumbs li').mouseout(function() {  
    $(this).find('.caption').fadeOut(500); 
});

這裏是我的HTML：

<ul class="thumbs"> 
<li> 

    <img src="images/1.gif" alt="" /> 

    <div class="caption"> 

     <h4>Cycliner</h4> 

     <p> 
     <a href="#">Visit website</a> 
     <br /> 
     <a href="#">View project</a> 
     </p> 

    </div> 

</li> 
</ul>

來源

2012-01-19 scarhand

您應該使用來代替鼠標移出的鼠標離開功能

http://jsfiddle.net/gygHg/

$('.thumbs li').mouseover(function() {  
$(this).find('.caption').fadeIn(500); 
}); 

$('.thumbs li').mouseleave(function() {  
$(this).find('.caption').fadeOut(500); 
});

來源

2012-01-19 14:03:49 Mackelito

完美。謝謝。 – scarhand

$('.thumbs li').mouseover(function() 
{ 
    $(this).find('.caption').stop(false,true).fadeIn(400); 
}); 
$('.thumbs li').mouseout(function() 
{ 
    $(this).find('.caption').stop(false,true).fadeOut(400); 
});

停止會幫助你的動畫的閃爍和堅持。我製作了一個與您的jQuery插件非常相似的插件:)

來源

2012-01-19 14:07:40 Eirinn

它沒有停止閃爍，但幫助了很多。 – scarhand

這很奇怪......我的腳本沒有使用該技術的問題。但我很高興它幫助:) – Eirinn

使用mouseenter()和mouseleave()而不是您當前綁定的事件。那些觸發鼠標的元素進入元素的邊界，並且不會因內部元素而重新觸發。

Here's an example

來源

2012-01-19 14:08:25 cdeszaq

簡單的jquery標題不起作用

回答

相關問題