Question

我试图在按钮上方添加某些提示并在悬停时显示它们，这样它们就会直接出现在鼠标指针旁边。我想在按钮的数据属性中存储这些技巧的文本，并使用jquery动态创建它们。我使用.pageX .pageY东西来查找光标的坐标，但它只在滚动的某个点上工作正常。

＆＃13;

button {
margin: 10px;
}
.divs {
    width: 100%;
    height: 350px;
    background-color: #ddd;
    margin: 0px;
}
.tip {
    border: 1px solid #eee;
    background: #fff;
    box-shadow: 3px 4px 6px rgba(0,0,0,0.4);
    padding: 3px; 
    font-weight: bolder;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="divs"></div>
    <button data-value="Per">First</button>
    <button data-value="Aspera">Second</button>
    <button data-value="Ad">Third</button><br>
    <button data-value="Astra">Yadi</button>
    <button data-value="To infinity">Yada</button>
    <button data-value="and beyond!">Bla-bla</button>
<div class="divs"></div>

＆＃13;

{{1}}

＆＃13;

你最好看一眼：http://jsfiddle.net/millerJr/ps8vf8ce/

那么，如何将这些提示直接附加到指针，无论滚动位置如何？谢谢！

Answer 1

您需要以这种方式使用e.clientX和e.clientY top: e.clientY+$(this).height()和left: e.clientX+$(this).width()/2作为范围中this元素的底部中心。您可以添加当前元素悬停在

上的任何其他内容

e.clientX和e.clientY将提供精确的鼠标坐标

以下代码段

＆＃13;

$('button').mouseenter(function (e) {
    var data = $(this).data('value');
    if(data){
        $('<div />', {
                    'class' : 'tip',
                    text : $(this).data('value'),
                    css : {
                        position: 'fixed',
                        top: e.clientY+$(this).height(),
                        left: e.clientX+$(this).width()/2
                    }
                }).appendTo(this);
}
})
.mouseleave(function () {                                              
   $('.tip', this).remove();                  
})
.mousemove(function (e) {      
    $('.tip', this).css({
        top: e.clientY+$(this).height(),
        left: e.clientX+$(this).width()/2
    });                 
})

＆＃13;

button {
margin: 10px;
}
.divs {
    width: 100%;
    height: 350px;
    background-color: #ddd;
    margin: 0px;
}
.tip {
    border: 1px solid #eee;
    background: #fff;
    box-shadow: 3px 4px 6px rgba(0,0,0,0.4);
    padding: 3px; 
    font-weight: bolder;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="divs"></div>
    <button data-value="Per">First</button>
    <button data-value="Aspera">Second</button>
    <button data-value="Ad">Third</button><br>
    <button data-value="Astra">Yadi</button>
    <button data-value="To infinity">Yada</button>
    <button data-value="and beyond!">Bla-bla</button>
<div class="divs"></div>

＆＃13;

如何将div附加到鼠标指针，以便在滚动期间正常工作

1 个答案: