精选文章 加速title显示的css实现方法

加速title显示的css实现方法

作者:KK19870916 时间: 2021-02-07 03:14:18
KK19870916 2021-02-07 03:14:18
【摘要】看九天做了标签的title标题快速显示的效果,查他js,半天没找到原理。后来在蓝色理想倒查到了。用css实现 
  
 
   
  
 
   
  
  
  css模拟title和alt的提示效果
  
  
  
  
  
  http://www.awebsite.cn">www.awebsite.cn一品轩欢迎每一位到访的朋友,非常希望能与网站设计爱好者们交流。
  http:...


css模拟title和alt的提示效果
<style>
.info {position:relative;background:#fff;color:#666; text-decoration:none;font-size:12px;width:150px;text-align:center;border:1px solid #ccc;height:25px;line-height:25px;}
.info:hover {background:#eee;color:#333;}
.info span {display: none }
.info:hover span {display:block;position:absolute;top:30px;left:60px;width:130px;border:1px solid #ff0000; background:#fff; color:#000;padding:5px;text-align:left;}
</style>




http://www.awebsite.cn
">www.awebsite.cn一品轩欢迎每一位到访的朋友,非常希望能与网站设计爱好者们交流。
http://www.awebsite.cn">www.awebsite.cn一品轩欢迎每一位到访的朋友,非常希望能与网站设计爱好者们交流。
http://www.awebsite.cn">www.awebsite.cn一品轩欢迎每一位到访的朋友,非常希望能与网站设计爱好者们交流。
http://www.awebsite.cn">www.awebsite.cn一品轩欢迎每一位到访的朋友,非常希望能与网站设计爱好者们交流。
http://www.awebsite.cn">www.awebsite.cn一品轩欢迎每一位到访的朋友,非常希望能与网站设计爱好者们交流。
再来一个js版的




Tip
<style>
body{ font-size: 12px; }
</style>


 



超链接title效果演示,光标移到我这儿看看!
lllll
<script>
function titleEffect(e)
{
e = e || event;
var element = e.srcElement || e.target;
var body = document.body;
var tip = document.getElementById("tip-div");
if (!tip)
{
tip = document.createElement("div");
tip.id = "tip-div";
with (tip.style)
{
display = "none";
color = "#000";
backgroundColor = "#f3f3f3";
border = "1px solid #cccccc";
fontSize = "12px";
padding = "5px";
lineHeight = "16px";
position = "absolute";
left = "0";
top = "0";
zIndex = 2000; // 一个足够大的数,保证层会处于最上层
}
body.appendChild(tip);
}
var title = element.getAttribute("title") || element.getAttribute("_title");
if (!title) return (tip.style.display=="block") && (tip.style.display="none") || true;
if (element.getAttribute("title"))
{
element.setAttribute("title", "");
element.setAttribute("_title", title);
}
tip.style.display = "block";
if (tip.innerHTML == title) return ;
else tip.innerHTML = " " + title;
var left = body.scrollLeft + e.clientX + 10;
left = (left>body.clientWidth-tip.clientWidth) ? (left-tip.clientWidth) : left;
var top = body.scrollTop + e.clientY + 10;
top = (top>body.clientHeight-tip.clientHeight) ? (top-tip.clientHeight) : top;
tip.style.left = left + "px";
tip.style.top = top + "px";
return true;
}
document.onmousemove = titleEffect;
</script>

转载于:https://www.cnblogs.com/silenfir/archive/2008/04/16/1156138.html

勿删,copyright占位
您找到想要的结果了吗?
加速title显示的css实现方法
提交成功!非常感谢您的反馈,我们会继续努力做到更好
分享文章到微博
分享文章到朋友圈

上一篇:ITIL V2V3ISO20000的关系和主要区别

下一篇:我不說你又不說‘對不起’!

您可能感兴趣

  • 初学《大话设计模式》——工厂方法模式

    一、概述 1、定义 工厂方法模式,定义一个用于创建对象的接口,让子类决定实例化哪一个类,工厂方法使一个类的实例化延迟到其子类。 2、结构图 二、代码示例 1、使用场景 使用Java面向对象语言实现一个计...

  • F5助通信服务提供商通过服务实现创收

    F5助通信服务提供商通过服务实现创收 网络通信频道 13年02月25日 17:19 【来稿】 作者:F5 责任编辑:张存 导读:F5 服务提供商与安全解决方案执行副总裁 Manny Rivelo 表示:“服务提供商现正面临着大量挑战,其中包括移动用户和应用持续增长、每用户平均收入 (ARPU) 不...

  • 使用DOM4J解析XML及采用Schema校验的方法

    使用DOM4J解析XML及采用Schema校验的方法 Validation Currentlydom4jdoesnotcomewithavalidationengine.Youareforcedtouseaexternalvalidator(译:dom4j无校验引擎,需使用外部校验).InthepastwerecommendedXerc...

  • 时间封装方法

    1、获取当月的第一天。(传递日期的方式是2018-05) public static String getdayFirst(String month) { if (month != null &...

  • 用python实现区块链的保姆级新手教程[全注释]

    区块链技术核心原理实现——Tiny熊老师区块链课堂的笔记   3-1 python 实现区块链环境准备   1、HTTP 超文本传输协议——Postman/curl  2、Python——PyCharm 3、工具:pip、pipenv、Flask/requests   3-2 建立项目,确定区块结构   cmd中: C:\Use...

  • Android 修改app图标和名称的方法

    1修改程序名: 请到values/strings.xml下 ? 1 2 3 4 5 ...

  • 为什么JavaScript中的方法或者变量名称前会加下划线

    为什么JavaScript中的方法或者变量名称前会加下划线 即我们需要清楚加下划线不是js的某种要求,是程序员约定俗成的。 1.通常变量前加下划线表示“私有变量” 2.函数名前加下划线表示“私有函数” “私有”这个词...

  • 归并排序实现c++版

    |基本思路 归并排序利用了递归的思想(而是分而治之的思想),将数组一分为二,先将左半部分(坐标为0~mid)排好序,再将右半部分排好序(都是调用函数),最后将两部分合并起来。整体算法时间复杂度为O(nlogn),空间复杂度为O(n)。 |归并排序的c++具体实现 #include<bits/stdc++.h> using namespace s...

CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。
加速title显示的css实现方法介绍:华为云为您免费提供加速title显示的css实现方法在博客、论坛、帮助中心等栏目的相关文章,同时还可以通过 站内搜索 查询更多加速title显示的css实现方法的相关内容。| 移动地址: 加速title显示的css实现方法 | 写博客