分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » WordPress » 代码 » WordPress修改ToolTip的样式
+

WordPress修改ToolTip的样式

WordPress修改ToolTip的样式-BanYuner

今天无意中在欲思博客查看文章的时候,鼠标移动到了链接上面的时候,出现了样式表让我个人觉得很不错,于是我就开始琢磨这个样式表是怎么样出现的。但是看了半天欲思博客的style.css样式表,没有任何发现,已经貌似被压缩了,没有头绪,所以我只能寻求万能的百度了。

百度之后确实是有相关的文章,很多,但是貌似都是出自一个人之手,是谁就不知道了,这里我直接将代码附上:

$(function() {
$("a[title]").each(function() {
var a = $(this);
var title = a.attr('title');
if (title == undefined || title == "") return;
a.data('title', title)
.removeAttr('title')
.hover(
function () {
var offset = a.offset();
$("<div id=\"anchortitlecontainer\"></div>").appendTo($("body")).html(title).css({ top: offset.top + a.outerHeight() + 10, left: offset.left + a.outerWidth() + 1 }).fadeIn(function () {
var pop = $(this);
setTimeout(function () { pop.remove(); }, pop.text().length*80);
});
},
function() { $("#anchortitlecontainer").remove(); }
);
});
});

上面的这段代码是可以直接引入到站点的主JS中的,比如你main.js或者custom.js等文件,这个就看自己的主题了。其次,代码中的变量大家可以修改的,如果不懂的话,也没有必要修改了。

接下来就是CSS代码了:

#anchortitlecontainer {
position: absolute;
z-index: 5999;
border: solid 1px #315B6C;
padding: 5px;
color: #315B6C;
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 5px;
display: none;
}
#anchortitlecontainer:before {
position: absolute;
bottom: auto;
left: -1px;
top: -15px;
border-color: transparent transparent transparent #315B6C;
border-style: solid;
border-width: 15px;
content: "";
display: block;
width: 0;
}
#anchortitlecontainer:after {
position: absolute;
bottom: auto;
left: 0px;
top: -13px;
border-color: transparent transparent transparent #FFFFFF;
border-style: solid;
border-width: 15px;
content: "";
display: block;
width: 0;
}

代码已经很详细了,大家可以自己慢慢的修改,慢慢的调试。最终效果见下图:
WordPress修改ToolTip的样式-BanYuner

我是修改了部分的,大家可以尝试一下修改哦。

关注我们 打赏 分享此文
微信扫码,关注我们
扫码,支持我
WordPress修改ToolTip的样式
支付宝(点击图片切换)
扫码,支持我
WordPress修改ToolTip的样式
微信(点击图片切换)
扫码,手机看
WordPress修改ToolTip的样式
匿名

个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃ 分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

相关推荐

  • WordPress修改默认的头像图标

    WordPress修改默认的头像图标

    随着越来越多人使用WordPress,但是很多用户不会修改自己站点的默认WordPress图标,就会跟我的站点一样,看上去非常不美观, ...

    点击查看
  • WordPress简易集成Markdown教程

    WordPress简易集成Markdown教程

    今天首先在群里面看到一个用户询问是否有方法将Markdown集成到主题里面去,后来我一想,这个所谓的Markdown确实是很多人提到 ...

    点击查看
  • WordPress制作简易年度总结页面

    WordPress制作简易年度总结页面

    今天早些时候已经制作一个类似112博客导航的页面,具体可以详见:

    点击查看
  • WordPress通过短代码显示指定文章内容

    WordPress通过短代码显示指定文章内容

    今天在一个WordPress交流群里面看到一个群友问一个问题,我个人方面也是很感兴趣,这个问题就是如何通过“新建文章栏输入链接 ...

    点击查看
  • 禁用WordPress 4.7版本的PDF预览功能

    禁用WordPress 4.7版本的PDF预览功能

    之前的文章我们也介绍了,关于WordPress 4.7版本中,新增了一个预览PDF的功能,详见:

    点击查看
  • WordPress获取文章的第一张图片并且显示

    WordPress获取文章的第一张图片并且显示

    关于这类的文章我们已经介绍过两种方法了,两种方法都不一样,但是适合自己的才是最好的,虽然今天我要介绍的方法可能不适合 ...

    点击查看
WordPress修改ToolTip的样式
1 + 9 =
  • 昵称 (必填)  
  • 邮箱 (必填)
  • 网址 (选填)