CSS3 tooltips 浮动显示提示说明

[ 作者:笑傲江湖 发布于:2012年-5月-12日 15:24 星期六  分类:百 宝 箱 ]

  这个tooltips,一般是用在按钮、图标或者其他网页元素上,用来详细说明按钮或者图标用途什么的,或者其他什么附加内容需要给用户提示的。有了它,对浏览网页的用户来说无疑是更方便了,不过这个tips的样式是纯粹由CSS3打造,所以,IE6这样的老古董估计看起来会有所不同,同时,因为IE6不支持hover这个属性,所以还要借助jQuery来搞定。
  具体的HTML和CSS代码,请查看下面帧页面的源代码。


  如果你需要在IE6下也能用这个浮动的Tips,那就的把下面的jQuery代码一起加上。
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
  $(function() {
    if ($.browser.msie && $.browser.version.substr(0,1)<7)
    {
      $('.tooltip').mouseover(function(){
            $(this).children('span').show();
          }).mouseout(function(){
            $(this).children('span').hide();
          })
    }
  });
</script>
原文:http://www.red-team-design.com/css3-tooltips

微信支付宝

标签: CSS CSS3 jQuery HTML 样式表 Tips

评论0 引用0 浏览2644

说点什么:

正文内容:

 




图片博文
异星战场 : 约翰·卡特传奇Laura Fygi- Flower 女人花