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

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

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

圆形菜单有提示文字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后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/down/45.html