import{S as I,i as z,s as G,C as A,w as O,x as V,y as W,z as X,A as H,f as J,t as K,B as M,X as L,l as m,r as C,a as w,V as N,m as v,n as D,u as h,h as o,c as x,W as Q,p as k,b as f,G as F,E as U}from"../chunks/index-cd58b8d1.js";import{P as Y}from"../chunks/post_layout-9085e57e.js";import"../chunks/posts-c52cb603.js";import"../chunks/title-765c989f.js";import"../chunks/index-81c83cec.js";import"../chunks/post_card-e7f4525a.js";import"../chunks/posts-57ab4794.js";import"../chunks/icon-3aa13b39.js";import"../chunks/head-4a058b17.js";import"../chunks/footer-1abd9501.js";function ss(d){let s,n,p,e,l,t,y,_,$,B,u,Z=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">gallery-item</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">overflow</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> hidden</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div><div class='line'></div><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">gallery-item</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">img</span><span style="color: #89DDFF">:</span><span style="color: #C792EA">hover</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">transform</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">scale</span><span style="color: #89DDFF">(</span><span style="color: #F78C6C">1.1</span><span style="color: #89DDFF">);</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">gallery-item</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">img</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">display</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> block</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">width</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">100%</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">transition</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> all </span><span style="color: #F78C6C">0.4s</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div></code></div></pre>`,E,i,S,c,j;return{c(){s=m("p"),n=C("\u601D\u8DEF\uFF1A"),p=w(),e=m("ol"),l=m("li"),t=C("\u8BBE\u7F6E\u653E\u5927"),y=w(),_=m("li"),$=C("\u9690\u85CF\u6EA2\u51FA"),B=w(),u=new N(!1),E=w(),i=m("p"),S=C("\u6548\u679C\uFF1A"),c=m("a"),j=C("https://codepen.io/sevichee/pen/wvrRjjq"),this.h()},l(a){s=v(a,"P",{});var r=D(s);n=h(r,"\u601D\u8DEF\uFF1A"),r.forEach(o),p=x(a),e=v(a,"OL",{});var g=D(e);l=v(g,"LI",{});var T=D(l);t=h(T,"\u8BBE\u7F6E\u653E\u5927"),T.forEach(o),y=x(g),_=v(g,"LI",{});var q=D(_);$=h(q,"\u9690\u85CF\u6EA2\u51FA"),q.forEach(o),g.forEach(o),B=x(a),u=Q(a,!1),E=x(a),i=v(a,"P",{});var b=D(i);S=h(b,"\u6548\u679C\uFF1A"),c=v(b,"A",{href:!0,rel:!0,target:!0});var P=D(c);j=h(P,"https://codepen.io/sevichee/pen/wvrRjjq"),P.forEach(o),b.forEach(o),this.h()},h(){u.a=E,k(c,"href","https://codepen.io/sevichee/pen/wvrRjjq"),k(c,"rel","nofollow noopener noreferrer external"),k(c,"target","_blank")},m(a,r){f(a,s,r),F(s,n),f(a,p,r),f(a,e,r),F(e,l),F(l,t),F(e,y),F(e,_),F(_,$),f(a,B,r),u.m(Z,a,r),f(a,E,r),f(a,i,r),F(i,S),F(i,c),F(c,j)},p:U,d(a){a&&o(s),a&&o(p),a&&o(e),a&&o(B),a&&u.d(),a&&o(E),a&&o(i)}}}function as(d){let s,n;const p=[d[0],R];let e={$$slots:{default:[ss]},$$scope:{ctx:d}};for(let l=0;l<p.length;l+=1)e=A(e,p[l]);return s=new Y({props:e}),{c(){O(s.$$.fragment)},l(l){V(s.$$.fragment,l)},m(l,t){W(s,l,t),n=!0},p(l,[t]){const y=t&1?X(p,[t&1&&H(l[0]),t&0&&H(R)]):{};t&2&&(y.$$scope={dirty:t,ctx:l}),s.$set(y)},i(l){n||(J(s.$$.fragment,l),n=!0)},o(l){K(s.$$.fragment,l),n=!1},d(l){M(s,l)}}}const R={title:"CSS \xB7 hover\u65F6\u56FE\u7247\u653E\u5927\u7684\u52A8\u6548",created:"2022-01-13T16:03:47.000Z",slug:"/hover.md",tags:["CSS Trick","CSS"],summary:"\u901A\u8FC7transform\u8BBE\u7F6E",lastmod:"2022-05-07T05:30:52.029Z",path:"/hover",toc:[],updated:"2022-08-06T10:49:47.292Z"};function ls(d,s,n){return d.$$set=p=>{n(0,s=A(A({},s),L(p)))},s=L(s),[s]}class ys extends I{constructor(s){super(),z(this,s,ls,as,G,{})}}export{ys as default,R as metadata};