이미지 캡션을위한 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> 

캡션은 display : none으로 설정됩니다. 상단 : -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

어쩌면이 솔루션은 폴더의 유틸리티가 될 수 있습니다

<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 :

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

     }); 

html로은과 같은

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

Answer 2

감사합니다, Returnvoid. 귀하의 제안은 더 많거나 적습니다. 내가 위의 div에서 일할 필요가있었습니다. 이미지를 회전시키고 있었기 때문에 어떤 이미지가 다루어 졌는지 나타내는 클래스를 붙이고 분리해야했습니다. 이 코드가 다른 사람에게 도움이되는 경우를 대비해서 작성했습니다.

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

});