2

我有一个处于禁用形式的单选按钮。我只想在该单选按钮被禁用时在悬停时显示一些文本。代码如下：

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>
4

1 回答 1

0

如何保持简单并使用 jQuery 的 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。这样做的原因是您不能在禁用元素上设置鼠标事件。还有其他更骇人听闻的方法可以做到这一点。

于 2013-11-15T10:22:56.020 回答