Jquery 호버 이미지에서 스팬 요소의 가시성을 변경하는 방법

Question

각 이미지에 설명이있는 간단한 HTML 페이지가 있습니다. 특정 이미지 위로 마우스를 가져 가면 특정 설명이 표시되어야합니다. CSS의 클래스 설명이 설정되었습니다. visibility : hidden;

내가 증명했지만, joverery 기능을 사용하면 클래스 가시성을 설정할 수 없습니다. visible; 가시성에서 span 요소의 클래스를 설정하기위한 jquery의 정확한 구문을 모르겠습니다. visible; 호버 P :

<div id="FiltriMusica2">        
    <p idsapore="1" class="sapore"><img alt="caffe.png" src="/caffe.png"> 
    <span class="descrizionesap">Adrenalina</span> 
    </p>  
    <p idsapore="2" class="sapore"><img alt="peperoncino.png" src="/peperoncino.png"> 
    <span class="descrizionesap" >Peperoncino</span>    
    </p>       
</div> 

CSS

.descrizionesap { 
    visibility:hidden; 
} 

자바 스크립트

jQuery(".sapore").hover(function() { 
    jQuery(this).children().find('.descrizionesap').css("visibility","visible");    
}, function() {        
    jQuery(".descrizionesap").css("visibility","hidden"); 
}); 

Answer 1

CSS는

.descrizionesap { 
    visibility:hidden; 
} 

/* if you want to show the span on image hover */ 
img:hover + .descrizionesap { 
    visibility: visible; 
} 

/* if you want to show the span on paragraph hover */ 
.sapore:hover .descrizionesap { 
    visibility: visible; 
} 

이 모두 예 IE6 온 (IE7에도 작동이 작업을 위해 충분하다 seudoclass는 링크 요소에 대해서만 작동합니다). 당신이 마크 업을 검증 한 것으로 관심을 다른 응답 상태처럼 data-id-sapore

Answer 2

처럼 뭔가에 속성 idsapore을 변경 고려하는 경우 보조 노트로

---

, 당신은 단지 그것을 할 CSS가 필요합니다. 하지만 여기에 display:block 및 display:none을 사용하여 jQuery에서이를 수행 할 수 있습니다.

.descrizionesap { 
    display: none; 
} 

지금 jQuery를, 당신이 할 수있는 CSS는 :

$('.sapore').hover(function() { 
    $(this).find('.descrizionesap').css('display', 'block'); 
}, function() { 
    $(this).find('.descrizionesap').css('display', 'none'); 
});