实用资源圆形彩色按钮的菜单 鼠标悬停显示提示

圆形彩色按钮的菜单 鼠标悬停显示提示

挺漂亮的一款导航菜单,鼠标指向每个按钮会显示提示文字,效果图如下:

圆形菜单有提示文字2.png

圆形菜单有提示文字.png

使用方法,将以下文件引入到网页head部分:

<link rel="stylesheet" type="text/css" href="tooltip_files/tooltipster.css" /><link rel="stylesheet" type="text/css" href="tooltip_files/style.css" /><script type="text/javascript" src="tooltip_files/jquery-2.0.0.min.js"></script><script type="text/javascript" src="tooltip_files/jquery.tooltipster.js"></script><script type="text/javascript">$(document).ready(function() { $('.tooltip').tooltipster();});</script>

本示例内容部分的代码如下(放入body部分):

<div style="margin-top:200px"></div> <!-- 这个空白div是为了方便演示 --><section id="facebook"><ul><a href="#"><span id="fackbook" class="tooltip" title="双截棍">范特西</span></a></ul></section><section id="twitter"><ul> <a href="#"><span id="twitter-default" class="tooltip" title="半岛铁盒">八度空间</span></a></ul></section><section id="google"><ul> <a href="#"><span id="google-default" class="tooltip" title="东风破">叶惠美</span></a></ul></section><section id="rss"><ul> <a href="#"><span id="rss-default" class="tooltip" title="我的地盘">七里香</span></a></ul></section><section id="tech"><ul> <a href="#"><span id="tech-default" class="tooltip" title="兰亭序">魔杰座</span></a></ul></section></center><section id="dribbble"><ul> <a href="#"><span id="dribbble-default" class="tooltip" title="烟花易冷">跨时代</span></a></ul></section>

预览效果下载地址

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建oracle 创建表空间立本站的目的是整理学习笔记,分享学习经验oracle 创建表空间,认识更多的朋友。oracle 创建表空间感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如oracle 创建表空间下,欢迎转载:
如果方便的话,转载请注明来自:http://www.sz-kmd.com.cn/down/45.html

DIV+CSS基础DIV+CSS技巧CSS3基础建站经验技巧实用资源下载