imovies
当前位置:首 页>> 百 宝 箱 >>CSS3 tooltips 浮动显示提示说明

CSS3 tooltips 浮动显示提示说明

  这个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
微信支付宝

标 签:CSSCSS3jQueryHTML样式表Tips

评 论0 引 用0 浏 览3333

上一篇jQuery Plugins:Flux Slider 2D/3D 图片切换效果展示

下一篇CSS3 ordered list styles 有序列表样式

说点什么:

正文内容:

 

图片博文

小游红山公园Wedding Anniversary

扫一扫分享之

人到穷途应一笑,几凡失意仍能傲。成败何须问江湖,我心依旧任逍遥。
这一生只想好好做个平凡的人,有个家有个梦,陪我迎接每一个早晨。
这一生只想好好做个平凡的人,何必争何必问,只有快乐开心才是真。