비활성화 된 라디오 버튼을 가리키면 텍스트를 표시하는 방법은 무엇입니까?

Question

하나의 라디오 버튼이 비활성화 된 형태로 있습니다. 단지 라디오 버튼이 비활성화되어있을 때 그 라디오 버튼을 가리키면 어떤 텍스트를 보여주고 싶습니다. 그에 대한 코드는 다음과 같습니다 :

자바 스크립트 :

$(document).ready(function(){ 
    $('#content').on('mouseenter', 'input#Radio', showBox); 
    $('#content').on('mouseleave', 'input#Radio', hideBox); 

    function showBox(e){ 
     var x = e.pageX + 20; 
     var y = e.pageY + 20; 
     $('#hoverbox').fadeIn(); 
     $('#hoverbox').offset({ left: x, top: y }); 
    } 
}); 

function hideBox(){ 
    $('#hoverbox').fadeOut(); 
} 

CSS :

#hoverbox { 
    display:none; 
    position:absolute; 
} 
#text { 
    width:100px; 
    height:100px; 
    background:#000; 
} 
.pop-up-bc-tooltip { 
    float:left; 
    padding:14px 12px; 
    border:2px solid #626367; 
    font: normal 14px Arial, Helvetica, sans-serif; 
    -moz-border-radius: 2px; 
    border-radius: 2px; 
    background:#fffcfc; 
} 

HTML :

<div id="hoverbox" class="pop-up-bc-tooltip"> 
    please complete the required fields above<br/> 
    prior to selecting your travel insurance 
</div> 

<div id="content"> 
    <input type="radio" id="radiobtn"/>Hi 
    <div id="hoverbox" class="pop-up-bc-tooltip"> 
     please complete the required fields above<br/> 
     prior to selecting your travel insurance 
    </div> 
</div> 

Answer 1

방법 K에 대한 JScript의

간단 eeping 및 jQuery를

DEMO

에서 slidenDown & slideUp를 사용

$(document).ready(function() { 

    //function that hides and shows the given div 
    //when mouse on & off the page-object-area div 
    $('#content').hover(

    function() { 
     $("#hoverbox").slideDown(100); 
    }, function() { 
     $("#hoverbox").slideUp(150); 

    }); 

}); 

편집 : 나는 "컨텐츠"라는 래퍼에서 장애인 버튼을 둘러싼 호버 효과를 적용했습니다 그 div에. 그 이유는 비활성화 된 요소에 마우스 이벤트를 사용할 수 없기 때문입니다. 이 작업을 수행하는 데 더 까다로운 방법이 있습니다.