通过JS简单实现html title效果

首先看一下默认的样式

字比较小,而且样式比较难看。title样式是不支持css修改的。所以我们只能通过js的方式来实现我们想要的title效果

先来看一下效果。可以按自己的想法进行修改。

现在说一下简单步骤

因为我们看到的title提示框其实是JS创建的DIV 所以我们要定义好样式

/*修改提示框*/ #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; }

2.然后加入JS(基于jquery)代码,使悬停是出现样式

$(function () { var x = 10; var y = 20; var newtitle = ''; $('span.mytooltip').mouseover(function (e) { newtitle = this.title; this.title = ''; $('body').append('

' + newtitle + '

'); $('#mytitle').css({ 'left': (e.pageX + x + 'px'), 'top': (e.pageY + y - 80 + 'px') }).show(); }).mouseout(function () { this.title = newtitle; $('#mytitle').remove(); }).mousemove(function (e) { $('#mytitle').css({ 'left': (e.pageX + x +10 + 'px'), 'top': (e.pageY + y - 60 + 'px') }).show(); }) });

newtitle 是需要显示的文字,如果显示不是title文字的话可以在这里修改

这就是全部内容了,非常简单。感兴趣的朋友可以关注PHP54.COM技术博客每天至少会有一篇实在内容推荐给大家。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180913G1469A00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券