null

暂无访客记录

为WordPress网站上的链接添加一个醒目的提示

详情
评论
问答
赞助

您可以通过搜索或浏览分类列表来找到您期望下载的资源。随后点击资源介绍页右侧的下载链接按钮,依据提示信息进行操作即可。

大部分资源可积分免费下载,为了维持网站的运行小部分资源须付费才能下载。

本站提供的下载资源均为网络搜集,仅供个人学习和交流使用。对于版权问题,请用户自行判断并承担相应责任。

随着时间的推移,维持网站的运行需要支出高昂的服务器和带宽费用。为了能继续坚持免费做下去,如果觉得文章对您有用,希望您能动动发财的小手免费赞助狐狸,给狐狸加油打气!激励狐狸库继续创作下去!谢谢!

在互联网的浩瀚海洋中,我们的网站就像一座明亮的灯塔,为无数用户照亮前行的道路。它承载着知识的传递、梦想的交流,以及大家共同的回忆与期待。然而,运营和维护这样一个网站需要投入大量的心血与资金。

现在,您只需通过支付宝扫码领红包,就能轻松成为我们的赞助人。这不仅是一次简单的支持,更是您与网站共同成长的见证。操作简单,打开支付宝,扫描专属二维码,您的每一份心意都将化作网站发展的动力。

您的赞助,能让网站不断升级,提供更优质的服务,给大家带来更好的体验。让我们携手共进,让这座灯塔绽放更耀眼的光芒,照亮更多人的网络世界 。

下面是免费赞助的方法和流程

  1. 下面图一是本站的支付宝每日领红包二维码,使用支付宝扫描二维码后会自动显示红包金额,有任意小额金额红包。
  2. 点击“去使用”,再扫描第三张图的二维码进行付款即可。
  3. 上面扫到多少红包就输入多少金额,红包会自动抵扣金额,所以不需要额外费用。
  4. 如需赞助自定义金额请到【赞助狐狸】页面进行赞助。
  5. 这个扫码红包是每天都可以领的哦,支持同账号重复,每天花一分钟时间即可免费支持本站!
扫码红包 红包图 扫码支付
为WordPress网站上的链接添加一个醒目的提示-狐狸库
wordpress

在Wordpres网站上,当鼠标移动到超链接,会浮现一个醒目的提醒,这是如何做的?

可能你发现很多童鞋的博客的链接上会弹出一个半透明的醒目提示,这是通过Sweet Titles标题增强插件实现的.

Sweet Titles 这个名字源自于一个改变 Title 提示效果的 js 插件 Sweet Titles Finalized。此插件不但让你的 title 提示效果变得美观,而且可以显示出你将要点击的链接的 url,让用户知道自己将要去哪里,同时提升了用户感受度。另外,系统的 title 提示有时间延迟,利用 js 可以迅速的展示出来。

不过个人感觉这个特效有点鸡肋,反而会干扰视线,影响浏览者阅读。

插件加载的JS文件有点大5K多,而Leeiio童鞋提供的简化代码,只有不到2K,如果你喜欢这个效果那就加上吧(代码中符号冲突,被表情替代,但不会影响复制使用):

var sweetTitles = {
x : 10, // @Number: x pixel value of current cursor position
y : 20, // @Number: y pixel value of current cursor position
tipElements : \"a\", // @Array: Allowable elements that can have the toolTip,split with \",\"
noTitle : true, //if this value is false,when the elements has no title,it will not be show
init : function() {
var noTitle = this.noTitle;
$(this.tipElements).each(function(){
$(this).mouseover(function(e){
if(noTitle){
isTitle = true;
}else{
isTitle = $.trim(this.title) != \'\';
}
if(isTitle){
this.myTitle = this.title;
this.myHref = this.href;
this.myHref = (this.myHref.length > 30 ? this.myHref.toString().substring(0,30)+\"...\" : this.myHref);
this.title = \"\";
var tooltip = \"<div id=\'tooltip\'><p>\"+this.myTitle+\"<em>\"+this.myHref+\"</em>\"+\"</p></div>\";
$(\'body\').append(tooltip);
$(\'#tooltip\')
.css({
\"opacity\":\"0.8\",
\"top\":(e.pageY+20)+\"px\",
\"left\":(e.pageX+10)+\"px\"
}).show(\'fast\');
}
}).mouseout(function(){
if(this.myTitle != null){
this.title = this.myTitle;
$(\'#tooltip\').remove();
}
}).mousemove(function(e){
$(\'#tooltip\')
.css({
\"top\":(e.pageY+20)+\"px\",
\"left\":(e.pageX+10)+\"px\"
});
});
});
}
};
$(function(){
sweetTitles.init();
});

代码很简洁,前提是你的主题已加载了 jQuery 库。

有效果没有样式还不行,而要添加 css 样式才能让整个效果显得更加美妙。以下是 css样式供参考。

body div#tooltip { position:absolute;z-index:1000;max-width:220px;width:auto !important;width:220px;background:#000;text-align:left;padding:5px;min-height:1em;}
body div#tooltip p { margin:0;padding:0;color:#fff;font:12pxverdana,arial,sans-serif; }
body div#tooltip p em { display:block;margin-top:3px;color:#f60;font-style:normal;font-weight:bold; }
温馨提示:本文最后更新于2022/10/20 04:46:46。若文章内容或图片失效,请留言联系站长反馈!
© 版权声明
THE END
点赞0赞赏 分享
评论 抢沙发

请登录后发表评论

    请登录后查看评论内容