页面增加问号图标,鼠标放置会提示文字信息。(记录日志)
程序员文章站
2022-06-22 15:55:59
先上图css样式/*提示框*/#mytitle { position: absolute; color: #ffffff; max-width: 160px; font-size: 14px; padding: 4px; background: rgba(40, 40, 40, 0.8); border: solid 1px #e9f7f6; border-radius:5px;}实现这种效果的js代码
先上图
css样式
/*提示框*/ #mytitle { position: absolute; color: #ffffff; max-width: 160px; font-size: 14px; padding: 4px; background: rgba(40, 40, 40, 0.8); border: solid 1px #e9f7f6; border-radius:5px; }
实现这种效果的js代码
<img src="../images/question.png" class="mytooltip" title="这是一段提示的详细信息,内容待确定" style="position: absolute;top: 10px; right: 30px; width: 15px;cursor:pointer;">
$(function () { var x = 10; var y = 20; var newtitle = ''; var mytitleId = ''; $('img.mytooltip').mouseover(function (e) { newtitle = this.title; this.title = ''; $('body').append('<div id="mytitle" >' + newtitle + '</div>'); $('#mytitle').css({ 'left': (e.pageX + x + 'px'), 'top': (e.pageY + y - 80 + 'px') }).show(); }).mouseout(function () { this.title = newtitle; $('#mytitle').remove(); }).mousemove(function (e) { mytitleId = this.id; if (mytitleId=="pdl" || mytitleId=="ptv"){ $('#mytitle').css({ 'left': (e.pageX + x +10 + 'px'), // 'top': (e.pageY + y - 60 + 'px') 'top': (e.pageY + y - 120 + 'px') }).show(); }else{ $('#mytitle').css({ 'left': (e.pageX + x +10 + 'px'), 'top': (e.pageY + y - 60 + 'px') // 'top': (e.pageY + y - 110 + 'px') }).show(); } }) });
本文地址:https://blog.csdn.net/xiexinxx0225/article/details/107376044
上一篇: 荐 jquery-ajxa
下一篇: Python实现Word的读写改操作