{"id":16842,"date":"2020-02-01T16:20:59","date_gmt":"2020-02-01T08:20:59","guid":{"rendered":"http:\/\/4563.org\/?p=16842"},"modified":"2020-02-01T16:20:59","modified_gmt":"2020-02-01T08:20:59","slug":"%e8%af%b7%e9%97%ae%e4%b8%aacss%e7%9a%84%e5%b0%8f%e9%97%ae%e9%a2%98","status":"publish","type":"post","link":"http:\/\/4563.org\/?p=16842","title":{"rendered":"\u8bf7\u95ee\u4e2acss\u7684\u5c0f\u95ee\u9898"},"content":{"rendered":"\n

\t\t\t\t\t\u9759\u5b89\u738b\u5983\u88f4\u5357\u82c7<\/strong> \t\t\t\t\u5927\u4f6c\u6709\u8bdd\u8bf4 : \t<\/p>\n

\u8bf7\u95ee\u4e2acss\u7684\u5c0f\u95ee\u9898<\/h3>\n

\t\t*{
            margin:0;
            padding:0;
      }
      .main{
            width:49px;
            height:49px;
            background:#f09205;
            position:relative;
            margin:200px auto;
      }
      li{
            list-style:none;
            float:left;
      }
      ul{
            position:absolute;
            width:200%;
            overflow: hidden;
      }
      .f:hover ul{
            left:-49px;
      }
    <\/style>
<\/head>
<body>
    <div class="main">
      <ul>
            <li class="f"><img src="images\/mi-logo.png"><\/li>
            <li><img src="images\/mi-home.png"><\/li>
      <\/ul>
    <\/div>
<\/body><\/p>\n

\u60f3\u95ee\u4e0b\u8fd9\u4e2ahover\u4e3a\u5565\u6ca1\u7528\uff1f
\u5927\u4f6c\u8bf7\u8d50\u6559
\u8c22\u8c22
\u4e0d\u7528js\u7528\u7eafcss\t\t\t\t<\/p>\n

\t\t\t\t\t\u6715\u7684\u5927\u6e05\u5b8c\u4e86\uff1f<\/strong> \t\t\t\t\u5927\u4f6c\u6709\u8bdd\u8bf4 : \t<\/p>\n

<\/h3>\n

\t\t.f:hover ul{<\/p>\n

\u628aul\u53bb\u6389\u770b\u770b\u5427\uff0c<\/p>\n

\u4f60\u8fd9li\u6807\u7b7e\u91cc\u9762\u53c8\u6ca1\u6709 ul\u600e\u4e48\u6709\u6548\u679c\t\t\t\t<\/p>\n

\t\t\t\t\t\u5343\u725b<\/strong> \t\t\t\t\u5927\u4f6c\u6709\u8bdd\u8bf4 : \t<\/p>\n

<\/h3>\n

\t\t\uff1f\uff1f\uff1f\u4f60hover\u5199\u7684\u5565\u3002\u53cd\u4e86\uff1f\u8fd8\u662f\u6ca1\u5199\t\t\t\t<\/p>\n

\t\t\t\t\t\u9759\u5b89\u738b\u5983\u88f4\u5357\u82c7<\/strong> \t\t\t\t\u5927\u4f6c\u6709\u8bdd\u8bf4 : \t<\/p>\n

<\/h3>\n

\t\t\u6715\u7684\u5927\u6e05\u5b8c\u4e86\uff1f \u5927\u4f6c\u6709\u8bdd\u8bf4 : 2020-2-1 16:21
.f:hover ul{<\/p>\n

\u628aul\u53bb\u6389\u770b\u770b\u5427\uff0c<\/p>\n

\u8c22\u8c22
\u53bb\u6389ul\u6ca1\u7528
\u96be\u9053\u4e0d\u80fd\u901a\u8fc7\u5b50\u7684hover\u6539\u53d8\u7236\u5417?\t\t\t\t<\/p>\n

\t\t\t\t\t\u9759\u5b89\u738b\u5983\u88f4\u5357\u82c7<\/strong> \t\t\t\t\u5927\u4f6c\u6709\u8bdd\u8bf4 : \t<\/p>\n

<\/h3>\n

\t\t\u5343\u725b \u5927\u4f6c\u6709\u8bdd\u8bf4 : 2020-2-1 16:22
\uff1f\uff1f\uff1f\u4f60hover\u5199\u7684\u5565\u3002\u53cd\u4e86\uff1f\u8fd8\u662f\u6ca1\u5199<\/p>\n

\u9f20\u6807\u653e\u5728\u7b2c\u4e00\u4e2ali\u4e0a\u6574\u4e2aul\u5411\u5de6\u504f\u79fb \t\t\t\t<\/p>\n

\t\t\t\t\t\u9759\u5b89\u738b\u5983\u88f4\u5357\u82c7<\/strong> \t\t\t\t\u5927\u4f6c\u6709\u8bdd\u8bf4 : \t<\/p>\n

<\/h3>\n

\t\t\u54ea\u4f4d\u5927\u4f6c\u7ed9\u89e3\u91ca\u4e00\u4e0b\uff1f\t\t\t\t<\/p>\n

\t\t\t\t\t\u5343\u725b<\/strong> \t\t\t\t\u5927\u4f6c\u6709\u8bdd\u8bf4 : \t<\/p>\n

<\/h3>\n

\t\t\u4f60\u4ee3\u7801\u5185\u5bb9\u7f3a\u5931\uff0c\u5176\u6b21\u4f60\u8fd9\u4e2a\u5c5e\u6027\u52a0\u4e86\u6bdb\u7528\u6ca1\u7528\uff0c\u5177\u4f53\u81ea\u5df1\u7814\u7a76
<head>
        <style>
    *{
            margin:0;
            padding:0;
      }
      .main{
            width:49px;
            height:49px;
            background:#f09205;
            position:relative;
            margin:200px auto;
      }
      li{
            list-style:none;
            float:left;
      }
      ul{
            position:absolute;
            width:200%;
            overflow: hidden;
      }
      .main:hover{
            left:-49px;
      }
    <\/style>
<\/head>
<body>
    <div class="main">
      <ul>
            <li class="f"><img src="images\/mi-logo.png"><\/li>
            <li><img src="images\/mi-home.png"><\/li>
      <\/ul>
    <\/div>
<\/body>\t\t\t\t<\/p>\n

\t\t\t\t\tcnly1987<\/strong> \t\t\t\t\u5927\u4f6c\u6709\u8bdd\u8bf4 : \t<\/p>\n

<\/h3>\n

\t\tul>li. f:hover\t\t\t <\/p>\n","protected":false},"excerpt":{"rendered":"

\u9759\u5b89\u738b\u5983\u88f4\u5357\u82c7 \u5927\u4f6c\u6709\u8bdd\u8bf4 : \u8bf7…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"_links":{"self":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/16842"}],"collection":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16842"}],"version-history":[{"count":0,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/16842\/revisions"}],"wp:attachment":[{"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16842"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=16842"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=16842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}