码迷,mamicode.com
首页 > Web开发 > 详细

css鼠标悬浮显示效果(鼠标手势)

时间:2015-01-17 20:43:31      阅读:281      评论:0      收藏:0      [点我收藏+]

标签:

鼠标悬浮显示效果

将鼠标悬浮到下面超链接上看效果!

css鼠标手型cursor中hand与pointer

Example:CSS鼠标手型效果 CSS鼠标手型效果

Example:CSS鼠标手型效果 CSS鼠标手型效果

注:pointer也是小手鼠标,建议大家用pointer,因为它可以兼容多种浏览器。

Example:CSS鼠标由系统自动给出效果 CSS鼠标由系统自动给出效果

Example:CSS鼠标十字型 效果 CSS鼠标十字型 效果

Example:CSS鼠标I字型效果 CSS鼠标I字形效果

Example:CSS鼠标等待效果 CSS鼠标等待效果

Example:CSS鼠标默认效果 CSS鼠标默认效果

Example:CSS鼠标向右的箭头效果 CSS鼠标向右的箭头效果

Example:CSS鼠标向右上箭头效果 CSS鼠标向右上箭头效果

Example:CSS鼠标向上箭头效果 CSS鼠标向上箭头效果

Example:CSS鼠标向左上箭头淘宝开店效果 CSS鼠标向左上箭头效果

Example:CSS鼠标向左箭头效果 CSS鼠标向左箭头效果

Example:CSS鼠标向左下箭头效果 CSS鼠标向左下箭头效果

Example:CSS鼠标向下箭头人生感悟效果 CSS鼠标向下箭头效果

Example:CSS鼠标向右下箭头效果 CSS鼠标向下箭头效果

 

源码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title>鼠标悬浮显示效果</title>
  6. </head>
  7. <body>
  8. <h2>鼠标悬浮显示效果</h2>
  9. css鼠标手型cursor中hand与pointer  <br/>
  10. Example:CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a><br/>
  11. Example:CSS鼠标手型效果 <a href="#" style="cursor:pointer">CSS鼠标手型效果</a><br/>
  12. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注:pointer也是小手鼠标,建议大家用pointer,因为它可以兼容多种浏览器。<br/>
  13. Example:CSS鼠标由系统自动给出效果 <a href="#" style="cursor:auto">CSS鼠标由系统自动给出效果</a><br/>
  14. Example:CSS鼠标十字型 效果 <a href="#" style="cursor:crosshair">CSS鼠标十字型 效果</a><br/>
  15. Example:CSS鼠标I字型效果 <a href="#" style="cursor:text">CSS鼠标I字形效果</a><br/>
  16. Example:CSS鼠标等待效果 <a href="#" style="cursor:wait">CSS鼠标等待效果</a><br/>
  17. Example:CSS鼠标默认效果 <a href="#" style="cursor:default">CSS鼠标默认效果</a><br/>
  18. Example:CSS鼠标向右的箭头效果 <a href="#" style="cursor:e-resize">CSS鼠标向右的箭头效果</a><br/>
  19. Example:CSS鼠标向右上箭头效果 <a href="#" style="cursor:ne-resize">CSS鼠标向右上箭头效果</a><br/>
  20. Example:CSS鼠标向上箭头效果 <a href="#" style="cursor:n-resize">CSS鼠标向上箭头效果</a><br/>
  21. Example:CSS鼠标向左上箭头效果 <a href="#" style="cursor:nw-resize">CSS鼠标向左上箭头效果</a><br/>
  22. Example:CSS鼠标向左箭头效果 <a href="#" style="cursor:w-resize">CSS鼠标向左箭头效果</a><br/>
  23. Example:CSS鼠标向左下箭头效果 <a href="#" style="cursor:sw-resize">CSS鼠标向左下箭头效果</a><br/>
  24. Example:CSS鼠标向下箭头效果 <a href="#" style="cursor:s-resize">CSS鼠标向下箭头效果</a><br/>
  25. Example:CSS鼠标向右下箭头效果 <a href="#" style="cursor:se-resize">CSS鼠标向下箭头效果</a><br/>
  26. </body>
  27. </html>

css鼠标悬浮显示效果(鼠标手势)

标签:

原文地址:http://www.cnblogs.com/tiankong102/p/4230970.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!