jQuery懸停閃爍圖像標題

Question

我有一些旋轉圖像隱藏字幕，我想用jQuery公佈時，有人懸停。每個圖像+標題是這樣的：

<img src="images/picture.jpg" id="feature-1-image" /> 
<p id="feature-1-caption" class="feature_caption">1: Here is the caption</p> 

標題設置爲顯示：無;並放置在頂部：-75px的圖像頂部。 jQuery的的相互作用是這樣：

$("img[id*=feature-]").hover(function(){ 
    var feature_id = $(this).attr("id").split("-"); 
    $('p[id=feature-' + feature_id[1] + '-caption]').addClass("showCaption"); 
    }, 
    function(){ 
    var feature_id = $(this).attr("id").split("-"); 
    $('p[id=feature-' + feature_id[1] + '-caption]').removeClass("showCaption"); 
}); 

它工作正常，但如果你將鼠標放在標題本身，它閃爍，因爲在IMG懸停效應開始發揮作用（即標題是頂部的圖像，所以它的火焰懸停和不停留，因此閃爍）。

我試過一堆東西，但沒有工作。如果我在標題文字上，關於停止懸停事件的任何想法？謝謝。

Answer 1

也許這個解決方案可以UTIL：

$(document).ready(function(){ 
      $(".img-caption").hover(
       function(){ 
        $(this).find('p').show(); 
       },   
       function(){ 
        $(this).find('p').hide(); 
       } 
      ); 

     }); 

的HTML如下：

<div class="img-caption"> 
<img src="http://www.bertellibici.com/products/112/images/bb_DSC_6763.jpg" id="feature-1-image" /> 
<p id="feature-1-caption" class="feature_caption">1: Here is the caption</p> 
</div> 

和CSS：

.img-caption{float: left;position:relative} 
.feature_caption{display: none;position: absolute;top: 0px;left: 0px} 

Answer 2

謝謝，Returnvoid。你的建議更多/更少我最終做的 - 我需要在上面的div上工作 - doh。因爲我在旋轉一些圖像，所以我需要附加和分離一個類，指出正在處理哪個圖像。這是我的代碼，以防其他人有所幫助。

// Handle click of featured items in sidebar 

$("li[id*=feature-]").click(function(event) { 
    // determine the feature_id 
    var feature_id = $(this).attr("id").split("-"); 

    // remove the class indicating what feature is selected 
    $("#imagespot").removeClass(); 
    // add class indicating the current feature 
    $("#imagespot").addClass("feature-" + feature_id[1]); 
    // hide all feature images 
    $("img[id*=feature-]").hide(); 
    // remove the active class from all list items, and attach to current one 
    $("li[id*=feature-]").removeClass("active"); 
    $(this).addClass("active"); 
    // show the selected image 
    $('img[id=feature-' + feature_id[1] + '-image]').animate({opacity:"show"}, "medium"); 

}); 

// Handle display of captions 

$("#imagespot").hover(function(){ 
    // determine the feature_id 
    var feature_id = $(this).attr("class").split("-"); 
    // make the appropriate caption appear on mouseover 
    $('p[id=feature-' + feature_id[1] + '-caption]').animate({opacity:"show"}, "fast"); 

    }, 
    function(){ 
    // determine the feature_id 
    var feature_id = $(this).attr("class").split("-"); 
    // make the appropriate caption disappear on mouseout 
    $('p[id=feature-' + feature_id[1] + '-caption]').animate({opacity:"hide"}, "slow"); 

});