源于生活

标题: 常见的鼠标移动到链接出现浮动的图片效果 [打印本页]
作者: kevin-ying    时间: 2014-3-10 01:01
标题: 常见的鼠标移动到链接出现浮动的图片效果
  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. }

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

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

  21. .newlist-opt span {
  22.    
  23. }

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

  38. .newlist-opt:hover img {
  39. visibility: visible;
  40. top: -30px;
  41. left: 0px;
  42. }
  43. </style>
  44. </head>

  46. <body>

  48.     <div id="mainCon">

  50.             <a class="newlist-opt" href="#">1111111111111111111111<span><img
  51.                   src="神奇的圖片URL" />
  52.             </span> </a>

  54.             <a class="newlist-opt" href="#">2222222222222222222222<span><img
  55.                   src="神奇的圖片URL" />
  56.             </span> </a>

  58.             <a class="newlist-opt" href="#">3333333333333333333333<span><img
  59.                   src="神奇的圖片URL" />
  60.             </span> </a>

  62.     </div>

  64. </body>
  65. </html>
复制代码






欢迎光临 源于生活 (http://bbs.vingoo.info/) Powered by Discuz! X3.1