如何对齐工具提示的自然风格:右下角的鼠标指针?
~~~一些更多的文本能够提交。 ~~~一些更多的文本能够提交。 ~~~一些更多的文本能够提交。 ~~~
<!DOCTYPE html> <html> <head> <title>Tooltip with Image</title> <Meta charset="UTF-8"> <style type="text/css"> .tooltip { text-decoration:none; position:relative; } .tooltip span { display:none; } .tooltip span img { float:left; } .tooltip:hover span { display:block; position:absolute; overflow:hidden; } </style> </head> <body> <a class="tooltip" href="http://www.google.com/"> Google <span> <img alt="" src="http://www.google.com/images/srpr/logo4w.png"> </span> </a> </body> </html>
解决方法
对于默认工具提示行为,只需添加title属性。这不能包含图像。
<div title="regular tooltip">Hover me</div>
在澄清问题之前,我用纯JavaScript做到这一点,希望你觉得有用。图像将弹出并按照鼠标。
JavaScript
var tooltipSpan = document.getElementById('tooltip-span'); window.onmousemove = function (e) { var x = e.clientX,y = e.clientY; tooltipSpan.style.top = (y + 20) + 'px'; tooltipSpan.style.left = (x + 20) + 'px'; };
CSS
.tooltip span { display:none; } .tooltip:hover span { display:block; position:fixed; overflow:hidden; }
扩展多个元素
多个元素的一个解决方案是更新所有工具提示跨度,并在鼠标移动时将其设置在光标下。
var tooltips = document.querySelectorAll('.tooltip span'); window.onmousemove = function (e) { var x = (e.clientX + 20) + 'px',y = (e.clientY + 20) + 'px'; for (var i = 0; i < tooltips.length; i++) { tooltips[i].style.top = y; tooltips[i].style.left = x; } };
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。