请先登录 | 在线情况 | 搜索 | 帮助
纯CSS的工具提示效果-凌飞江湖论坛
发帖 回复 您是本帖第 1291 个阅读者  适合打印机打印的版本 添加加到IE收藏夹 浏览上一篇主题 浏览下一篇主题
主题:纯CSS的工具提示效果
凌飞
官府 [掌门]

等级:管理员
经验:244
金币:244
发文:139篇
状态:离线
加入:2007/5/15
星座:

凌飞发表过主题 引用 回复 编辑 删除 2007/12/12 23:37:14 1
 
纯CSS的工具提示效果

工具提示是当鼠标停留在具有title属性的元素上的时候, 浏览器可以弹出黄色的小文本框.

  例:
<p>
<a href="http://www.lingfei.com/" class="tishi">
鼠标移动这里 <span>提示语言</span> </a> 将会看见纯CSS工具提示
</p>

  这个链接是 "鼠标移动到这里" ,同时当鼠标移动到链接时,会弹出纯CSS样式, 这样当搜索引擎的蜘蛛抓取时,是不会把提示语言给遗漏的.这样, 就很好的利用这一纯CSS工具,有效的提高SEO效果.

  这里,我们需要做的是把 链接 (锚) 的position 属性设置为 relative ,这样,就可以相对于父元素的位置对span的内容进行绝对定位,也就是说,无论在网页的哪个地方使用这种技术,都可以在链接的旁边出现提示工具. 同时,我们的目的是希望浏览者的鼠标移动到链接是才出现提示,所以,先把span的display属性设置为none

代码:
a.tishi {
position:relative;
}
a.tishi span {
display:none;
}

  然后,当鼠标移动到锚上时, 我们希望这时候能显示 span 的内容了.
  因此,我们需要将 span 的属性设置为 block,而且仅限于鼠标停留在链接时.

  现在,我们要让SPAN的文本出现在链接的右下方(因为停留在右下方是最符合浏览者习惯的形式)
  所以,我们必须要span的position设置为absolute(绝对定位),看下面的代码:

a.tishi:hover span {
display:block;
position: absoulte;
top: 1px;
left: 2px;
}

  基本上就OK了

  现在,我们再把 span 这个标签美化一下(完善上面的CSS代码)

a.tishi:hover span {
display:block;
position: absoulte;
top: 1px;
left: 2px;
border:1px solid #9f6;
background-color:#ff6;
color:#000;
padding:0.3px 0.5px;
}

凌飞的个性签名:凌云壮志飞


收藏帖子 | 取消收藏 | 返回顶部 
凌飞江湖论坛