javascript - 悬停功能实现

Question

我想将鼠标悬停在联系人标题文本上。我希望显示的内容也跟随光标。我用我的悬停做了一个 jsfiddle，但我不知道为什么不工作......

HTML

<div class="toggleSwitch_j">
    <a href="#"> Contact Title </a>
    <div class="SignatureBox">Text Displayed</div>
</div>

CSS

.SignatureBox {
    display: none; 
    width: 200px;
    height: 30px;
    background-color: #F9F7F7;
    border: 1px solid #e4e4e4;
}

JS

$(document).ready(function() {
    $('.SignatureBox').hide();
    $('.toggleSwitch_j').hover(function () {
        $(this).children('.SignatureBox').show();
    }, function () {
        $(this).children('.SignatureBox').hide();
    });
});

演示

http://jsfiddle.net/u3pW8/2/

Answer 1

您可以将 pageX 和 pageY 与 .offset() 函数一起使用

$(this).children('.SignatureBox').show().offset({left: e.pageX, top: e.pageY});

demo

完整代码:

 $(document).ready(function() {
$('.SignatureBox').hide();
        $('.toggleSwitch_j').hover(function (e) {

            $(this).children('.SignatureBox').show().offset({left: e.pageX, top: e.pageY});
        }, function () {
            $(this).children('.SignatureBox').hide();
        });

 });