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

});