自定义鼠标悬置事件title样式
CSS样式用于title展示的标签js代码块动态加载使用实际效果展示CSS样式
#mytitle {position: absolute;color: #ffffff;max-width: 900px;font-size: 12px;line-height: 20px;padding: 20px;background: rgb(5, 73, 89);rgba(40, 40, 40, 0.8);border-radius: 5px;margin: 10px 50px 10px 50px;}
用于title展示的标签
<div id="content"></div><div id="mytitle" style="display: none"></div>
js代码块
//鼠标悬置function myTitle(content){console.log("myTitle");$(function () {var x = 10;var y = 20;var newtitle = content;$('#mytitle').html(newtitle);$('#mytitle').show();$('.mytooltip').mouseover(function (e) {$('#mytitle').css({'left': (e.pageX + x + 'px'),'top': (e.pageY + y - 80 + 'px')}).show();}).mouseout(function () {$('#mytitle').html("");$('#mytitle').hide();}).mousemove(function (e) {$('#mytitle').css({'left': (e.pageX + x + 10 + 'px'),'top': (e.pageY + y - 60 + 'px')}).show();});});}
动态加载使用
function show(content) {var str = "";if (content.length > 5) {let subContent = content.substring(0, 5) + "..";str = "<span class='mytooltip' οnmοuseοver='myTitle(\"" + content + "\")'>[" + subContent + "]</span>\n";}else {str = "<span>[" + content + "]</span>\n";}$("#content").append(str);}
实际效果展示
自定义title会随鼠标移动显示。
