Question

我正在尝试在我正在创建的tumblr主题的右下角添加一个谨慎的信用链接，它显示了一个悬停在光标后面的光标后面的工具提示。问题是，除非用户位于页面的最顶端，否则工具提示不会显示，并且如果用户完全向下滚动则完全停止工作。

我不是一个非常有经验的程序员，而且完全是自学成才，所以如果解决方案非常简单，我会道歉。以下是我正在处理的博客的链接：http://mayfrogs.tumblr.com/
这里有一个jsfiddle，里面有信用按钮的基本代码：https://jsfiddle.net/kbsnzfyd/2/
我认为这是位置属性的一个问题，但我需要信用在右下方，而我能找到让它留在那里的唯一方法是给它一个固定的位置。这是css：

.c:hover .c-tooltip {
    display:block;
}

.c-tooltip {
    display:none;
    background: #b3d9ff;
    border:1px solid #e0f3f8;
    font-variant:small-caps;
    letter-spacing:2px;
    font-weight:bold;
    font-size:10px;
    text-align:center;
    border-radius:5px;
    margin-left: -85px;
    margin-top:-50px;
    position:fixed;
    padding: 10px;
    z-index: 1000;
    width:60px;
    height:30px;
}

.c {
    position: fixed;
    z-index:800;
    bottom:15px;
    right:15px;
}

.c a {
    text-decoration: none;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.c a:hover {
    color:#99ccff;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

javascript：

var tooltip = document.querySelectorAll('.c-tooltip');

document.addEventListener('mousemove', fn, false);

function fn(e) {
    for (var i=tooltip.length; i--;) {
        tooltip[i].style.left = e.pageX + 'px';
        tooltip[i].style.top = e.pageY + 'px';
    }
}

和html：

<div class="c"><a href="http://mayfrog-themes.tumblr.com/">
    (Anchor Icon)</a>
    <span class="c-tooltip">Theme by Mayfrogs</span>
    </div>

我已经用锚点图标替换了这里的锚图标，但我正在使用＆＃34;字体很棒＆＃34;实际代码中的图标。

Answer 1

尝试使用client代替page，如下所示：

tooltip[i].style.left = e.clientX + 'px';
tooltip[i].style.top = e.clientY + 'px';

这将获得鼠标指针坐标而不是页面，因为这些将在您滚动时向下移动。

Answer 2

这是一个解决方案：

https://jsfiddle.net/qdsq0s9h/

主要问题是，你的工具提示是一个带有display：fixed style的元素。当您更改工具提示的位置时，它会计算相对于锚图标（.c元素）的顶部和左侧值。

var tooltip = $('.c-tooltip');
var offset = 30;
document.addEventListener('mousemove', fn, false);

function fn(e) {
    $(document).mousemove(function(e){
        $(tooltip).css({left:e.pageX-tooltip.width()-offset, top:e.pageY-tooltip.height()-offset});
    });
}

$( ".c" ).on( "mouseover", function() {
    $( ".c-tooltip" ).show();
});

$( ".c" ).on( "mouseout", function() {
    $( ".c-tooltip" ).hide();
});

滚动后悬停工具提示停止工作

2 个答案: