我正在尝试在我正在创建的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;实际代码中的图标。
答案 0 :(得分:0)
尝试使用client
代替page
,如下所示:
tooltip[i].style.left = e.clientX + 'px';
tooltip[i].style.top = e.clientY + 'px';
这将获得鼠标指针坐标而不是页面,因为这些将在您滚动时向下移动。
答案 1 :(得分:0)
这是一个解决方案:
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();
});