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

如何保持简单并使用slidenDown＆amp;从jQuery滑动

DEMO

的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);

    });

});

编辑：我已将禁用按钮括在名为“content”的包装中，并将悬停效果应用于该div。原因是您不能在禁用的元素上使用鼠标事件。还有其他更糟糕的方法可以做到这一点。

如何在停用的单选按钮上显示文本？

1 个答案: