如何在懸停的單選按鈕上顯示文本？

Question

我有一個單選按鈕，處於禁用狀態。我只想在僅禁用該單選按鈕時將其懸停在某個文本上。代碼是如下：

的JavaScript：

$(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

如何ķ eeping它簡單和從jQuery的

DEMO

使用slidenDown &效果基本show的Jscript

$(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); 

    }); 

}); 

EDIT：我在一個被稱爲 「內容」 包裝所包圍的禁用的按鈕和應用懸停效果在那個div上。原因是您無法在禁用的元素上使用鼠標事件。還有其他更好的方法來做到這一點。