设为首页收藏本站关注微信<<< 抵制 IE6 人人有责 >>>
搜索
热搜: 活动 交友 discuz
查看: 2072|回复: 0
打印 上一主题 下一主题

[WEB前端] 常见的鼠标移动到链接出现浮动的图片效果

[复制链接]
跳转到指定楼层
楼主
发表于 2014-3-10 01:01:06 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>常见的鼠标移动到链接出现浮动的图片效果  by: kevin-ying.com (源来如此)</title>
  6. <style type="text/css">
  7. .newlist-opt {
  8. display: block;  
  9. }

  10. .newlist-opt span {
  11. position: relative;
  12. z-index: 0;
  13. }

  14. .newlist-opt:hover {
  15. background-color: transparent;
  16. z-index: 50;
  17. }

  18. .newlist-opt span {
  19.    
  20. }

  21. .newlist-opt span img {
  22. border-width: 0;
  23. padding: 2px;
  24. position: absolute;
  25. background-color: #FFFFE0;
  26. left: -1000px;
  27. border: 1px dashed gray;
  28. visibility: hidden;
  29. color: #000;
  30. text-decoration: none;
  31. padding: 5px;
  32. }

  33. .newlist-opt:hover img {
  34. visibility: visible;
  35. top: -30px;
  36. left: 0px;
  37. }
  38. </style>
  39. </head>

  40. <body>

  41.     <div id="mainCon">

  42.             <a class="newlist-opt" href="#">1111111111111111111111<span><img
  43.                   src="神奇的圖片URL" />
  44.             </span> </a>

  45.             <a class="newlist-opt" href="#">2222222222222222222222<span><img
  46.                   src="神奇的圖片URL" />
  47.             </span> </a>

  48.             <a class="newlist-opt" href="#">3333333333333333333333<span><img
  49.                   src="神奇的圖片URL" />
  50.             </span> </a>

  51.     </div>

  52. </body>
  53. </html>
复制代码


分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 转播转播 分享淘帖
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 免费注册

本版积分规则

QQ|手机版|Archiver|源于生活(个人生活娱乐工作的笔记)css3,html5,学习笔记    

GMT+8, 2024-11-23 20:41 , Processed in 0.124800 second(s), 26 queries .

Powered by Mr.Kevin-ying

© 2004-2015

快速回复 返回顶部 返回列表