{"id":3303,"date":"2013-06-05T17:12:29","date_gmt":"2013-06-05T09:12:29","guid":{"rendered":"http:\/\/www.52inwet.com\/?p=3303"},"modified":"2013-06-05T17:12:25","modified_gmt":"2013-06-05T09:12:25","slug":"%e3%80%90%e7%bd%91%e7%ab%99%e5%bb%ba%e8%ae%be%e3%80%91css3%e5%ae%9e%e4%be%8b%e6%95%99%e7%a8%8bhover%e3%80%81active%e5%92%8cfocus%e4%bc%aa%e9%80%89%e6%8b%a9%e5%99%a8","status":"publish","type":"post","link":"http:\/\/www.52inwet.com\/?p=3303","title":{"rendered":"\u3010\u7f51\u7ad9\u5efa\u8bbe\u3011CSS3\u5b9e\u4f8b\u6559\u7a0b:hover\u3001active\u548c:focus\u4f2a\u9009\u62e9\u5668"},"content":{"rendered":"

CSS3\u7684\u4f2a\u7c7b\u9009\u62e9\u5668\u5c31\u662f\u591a\uff0c\u4eca\u5929\u6211\u4eec\u6765\u5b66\u4e60\u65b0\u7684\u4f2a\u7c7b\u9009\u62e9\u5668\u2014\u2014UL\u72b6\u6001\u4f2a\u7c7b\u9009\u62e9\u5668\u3002\u8fd9\u4e9b\u9009\u62e9\u5668\u90fd\u6709\u4e00\u4e2a\u5171\u540c\u7684\u7279\u5f81\u540d\u90a3\u5c31\u662f\u5b9a\u4e49\u7684\u6837\u5f0f\u53ea\u6709\u5f53\u5143\u7d20\u5904\u4e8e\u67d0\u79cd\u72b6\u6001\u4e0b\u65f6\u624d\u8d77\u4f5c\u7528\uff0c\u5728\u9ed8\u8ba4\u72b6\u6001\u4e0b\u65e0\u6548\u3002<\/p>\n

\u4eca\u5929\u6211\u4eec\u5148\u6765\u63a5\u89e6:hover\u3001active\u548c:focus\u8fd9\u4e09\u79cd\u72b6\u6001\u4f2a\u7c7b\u9009\u62e9\u5668\u3002<\/p>\n

:hover\u9009\u62e9\u5668\u3001:active\u9009\u62e9\u5668\u548c:focus\u9009\u62e9\u5668
\n:hover\u9009\u62e9\u5668\uff1a\u5f53\u9f20\u6807\u60ac\u505c\u5728\u6240\u6307\u5b9a\u7684\u5143\u7d20\u4e0a\u65f6\u6240\u4f7f\u7528\u7684\u6837\u5f0f\uff1b
\n:active\u9009\u62e9\u5668\uff1a\u5f53\u6240\u6307\u5b9a\u7684\u5143\u7d20\u5904\u4e8e\u6fc0\u6d3b\u72b6\u6001\uff08\u9f20\u6807\u5728\u5143\u7d20\u4e0a\u6309\u4e0b\u8fd8\u6ca1\u6709\u677e\u5f00\uff09\u65f6\u6240\u4f7f\u7528\u7684\u6837\u5f0f\uff1b
\n:focus\u9009\u62e9\u5668\uff1a\u5f53\u5143\u7d20\u83b7\u5f97\u5149\u6807\u7126\u70b9\u65f6\u4f7f\u7528\u7684\u6837\u5f0f\uff0c\u4e3b\u8981\u7528\u5728\u6587\u672c\u6846\u8f93\u5165\u6587\u5b57\u65f6\u4f7f\u7528\uff1b
\n\u3010\u6ce8\u3011\u4e0b\u65b9\u6848\u4f8b\u8fd0\u884c\u6548\u679c\uff0c\u4e4b\u6240\u4ee5\u70b9\u51fb\u540e\u7acb\u5373\u53d8\u4e3a\u7eff\u8272\u662f\u56e0\u4e3aactive\u89e6\u53d1\u7684\u540c\u65f6focus\u4e5f\u89e6\u53d1\u4e86\uff0c\u6240\u4ee5active\u5b9a\u4e49\u7684\u6837\u5f0f\u770b\u4f3c\u65e0\u6548\uff0c\u5927\u5bb6\u53ef\u4ee5\u5148\u628afocus\u5b9a\u4e49\u7684\u6837\u5f0f\u6ce8\u91ca\u6389\u8fd0\u884c\uff1b<\/p>\n

\n
    \n
  1. <!DOCTYPE HTML><\/li>\n
  2. <\/li>\n
  3. <html><\/li>\n
  4. <\/li>\n
  5. <head><\/li>\n
  6. <\/li>\n
  7. <meta charset=”gb2312″><\/li>\n
  8. <\/li>\n
  9. <title>CSS3\u5b9e\u4f8b\u6559\u7a0b:hover\u3001active\u548c:focus\u4f2a\u9009\u62e9\u5668\u2014\u2014\u7f51\u9875\u6559\u5b66\u7f51webjx.com<\/title><\/li>\n
  10. <\/li>\n
  11. <style type=”text\/css”><\/li>\n
  12. <\/li>\n
  13. *{margin:0; padding:0;}<\/li>\n
  14. <\/li>\n
  15. body{margin-bottom:20px; font-family:”Microsoft yahei”; font-size:14px;}<\/li>\n
  16. <\/li>\n
  17. ul{margin:50px auto; width:260px; height:100px; list-style:none;}<\/li>\n
  18. <\/li>\n
  19. ul li{margin-bottom:10px; overflow:hidden;}<\/li>\n
  20. <\/li>\n
  21. label,input{display:inline; float:left;}<\/li>\n
  22. <\/li>\n
  23. label{padding-right:8px; width:50px; height:27px; line-height:27px; text-align:right;}<\/li>\n
  24. <\/li>\n
  25. input{width:200px; height:25px; border:1px #eee solid; border-top:1px #d1d1d1 solid; outline:none;}<\/li>\n
  26. <\/li>\n
  27. input:hover{background:#eff7ff;}<\/li>\n
  28. <\/li>\n
  29. input:active{background:#ffd;}<\/li>\n
  30. <\/li>\n
  31. input:focus{background:#f2fddb;}<\/li>\n
  32. <\/li>\n
  33. <\/style><\/li>\n
  34. <\/li>\n
  35. <\/head><\/li>\n
  36. <\/li>\n
  37. <\/li>\n
  38. <body><\/li>\n
  39. <\/li>\n
  40. <ul><\/li>\n
  41. <\/li>\n
  42. <li><\/li>\n
  43. <\/li>\n
  44. <label for=”userName”>\u59d3\u540d:<\/label><\/li>\n
  45. <\/li>\n
  46. <input id=”userName” type=”text”\/><\/li>\n
  47. <\/li>\n
  48. <\/li><\/li>\n
  49. <\/li>\n
  50. <li><\/li>\n
  51. <\/li>\n
  52. <label for=”userPwd”>\u5bc6\u7801:<\/label><\/li>\n
  53. <\/li>\n
  54. <input id=”userPwd” type=”password”\/><\/li>\n
  55. <\/li>\n
  56. <\/li><\/li>\n
  57. <\/li>\n
  58. <\/ul><\/li>\n
  59. <\/li>\n
  60. <\/body><\/li>\n
  61. <\/li>\n
  62. <\/html><\/li>\n<\/ol>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

    CSS3\u7684\u4f2a\u7c7b\u9009\u62e9\u5668\u5c31\u662f\u591a\uff0c\u4eca\u5929\u6211\u4eec\u6765\u5b66\u4e60\u65b0\u7684\u4f2a\u7c7b\u9009\u62e9\u5668\u2014\u2014UL\u72b6\u6001\u4f2a\u7c7b\u9009\u62e9\u5668\u3002\u8fd9\u4e9b\u9009\u62e9\u5668\u90fd\u6709\u4e00\u4e2a\u5171\u540c\u7684\u7279\u5f81\u540d […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[24],"tags":[44,43,30,25],"_links":{"self":[{"href":"http:\/\/www.52inwet.com\/index.php?rest_route=\/wp\/v2\/posts\/3303"}],"collection":[{"href":"http:\/\/www.52inwet.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.52inwet.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.52inwet.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.52inwet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3303"}],"version-history":[{"count":3,"href":"http:\/\/www.52inwet.com\/index.php?rest_route=\/wp\/v2\/posts\/3303\/revisions"}],"predecessor-version":[{"id":3306,"href":"http:\/\/www.52inwet.com\/index.php?rest_route=\/wp\/v2\/posts\/3303\/revisions\/3306"}],"wp:attachment":[{"href":"http:\/\/www.52inwet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.52inwet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3303"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.52inwet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}