分享各种网络资源
是我乃至整个互联网的精髓所在
最新消息:站点已经开通最新消息功能,请随时关注~
 您目前所在位置: 站点首页 » WordPress » 代码 » WordPress修改ToolTip的样式

WordPress修改ToolTip的样式

WordPress修改ToolTip的样式-BanYuner

WordPress修改ToolTip的样式

今天无意中在欲思博客查看文章的时候,鼠标移动到了链接上面的时候,出现了样式表让我个人觉得很不错,于是我就开始琢磨这个样式表是怎么样出现的。但是看了半天欲思博客的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修改ToolTip的样式
匿名

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

相关推荐

  • WordPress纯代码实现文章AJAX点赞

    WordPress纯代码实现文章AJAX点赞

    这个功能其实在很多主题中都集成进去了,DUX默认的主题里面也是有这个功能的,但是我将其删除了,之后换上了评星插件了,评 ...

    点击查看
  • WordPress页面(page)添加标签和分类功能

    WordPress页面(page)添加标签和分类功能

    WordPress页面(page)添加标签和分类功能 文章分类目录和标签功能是WordPress自带的功能,但是很多时候,喜欢使用页面的用 ...

    点击查看
  • 如何在WordPress文章中插入视频

    如何在WordPress文章中插入视频

    如何在WordPress文章中插入视频 现在很多站点都是做视频站点的,同时也有很多视频站点都是使用的CK播放器,如果你已经使用了 ...

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