网络编程
位置:首页>> 网络编程>> 网页设计>> CSS鼠标悬停tip效果

CSS鼠标悬停tip效果

作者:番茄红了  发布时间:2007-08-26 17:32:00 

标签:鼠标悬停,CSS

忽然想起一个CSS的特性,写一段代码玩玩:


<style type="text/css">
body {font:normal 12px Verdana}
a#tip {position:relative;left:75px; font-weight:bold;}
a#tip:link,a#tip:hover {text-decoration:none;color:#000;display:block}
a#tip span {display:none;text-decoration:none;}
a#tip:visited {color:#000;text-decoration:underline;}
a#tip:hover #tip_info {display:block;border:1px solid #F96;background:#FFEFEF;padding:10px 20px;position:absolute;top:0px;left:90px;color:#009933}
</style>


CSS鼠标悬停tip效果图:

演示:

呵呵,是不是很方便,利用这个原理相信大家可以作出一些漂亮的菜单效果来了~

所有的浏览器都兼容的哦~


0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com