jquery - 如何在禁用的单选按钮悬停时显示文本？

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

如何保持简单并使用 jQuery 的 slidenDown 和 slideUp

DEMO

脚本

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

    });

});

编辑:我将禁用的按钮封装在一个名为“content”的包装器中，并在该 div 上应用了悬停效果。这样做的原因是您不能在禁用的元素上有鼠标事件。还有其他黑客方法可以做到这一点。