https://learnreact.design/_next/static/chunks/pages/tips/hover-css-3d9328e6e5987e0c12fc.js

1_N_E=(window.webpackJsonp_N_E=window.webpackJsonp_N_E||[]).push([[142,203],{"9sEH":function(e,t,n){"use strict";n.d(t,"a",(function(){return u}));var o=n("ODXe"),i=(n("q1tI"),n("9ixD")),r=n("soUV"),a=n("f4y1"),c=n("YfHv"),p=n("Aiso"),d=n.n(p),s=n("9qq+"),m=n("MamX"),l=n("qKvR"),u=function(e){var t=e.children,n=e.meta||{},p=n.title,u=n.slug,g=n.description,x=n.videoPoster,h=n.video,f=n.sourceFile,b=n.tags,v=n.date,j=Object(m.a)(u,h,x),y=Object(o.a)(j,2),w=y[0],O=y[1];return Object(l.c)(r.a,null,Object(l.c)(i.b,{title:p,description:g}),Object(l.c)(a.a,null,Object(l.c)("div",{className:"w-11/12 max-w-prose mx-auto space-y-10 leading-loose "},Object(l.c)("div",{className:"my-10 flex flex-col justify-center items-center space-y-8 md:my-16 lg:max-w-2xl lg:my-24 xl:max-w-3xl  xl:my-36 "},Object(l.c)("h1",{className:"font-bold leading-tight text-center text-2xl sm:text-4xl xl:text-5xl "},p),Object(l.c)("div",{className:"flex space-x-2 text-sm"},b.map((function(e){return Object(l.c)(s.b,{key:"tag"},e)})),Object(l.c)("div",{className:"pl-8"},"Updated: ",v))," "),w&&O?Object(l.c)(c.a,{videoUrl:w,posterUrl:O,play:!0,width:640,height:360}):O&&Object(l.c)(d.a,{src:O,width:640,height:360}),t,f&&Object(l.c)("div",null,Object(l.c)("h2",{className:"text-3xl font-bold my-3 "},"Source Code"),Object(l.c)(s.e,{href:f},Object(l.c)("a",null,"Check out the complete source code here"))))))}},BsWD:function(e,t,n){"use strict";n.d(t,"a",(function(){return i}));var o=n("a3WO");function i(e,t){if(e){if("string"===typeof e)return Object(o.a)(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?Object(o.a)(e,t):void 0}}},FmVU:function(e,t,n){"use strict";n.r(t),n.d(t,"meta",(function(){return c})),n.d(t,"default",(function(){return s}));var o=n("wx14"),i=n("Ff2n"),r=(n("q1tI"),n("7ljp")),a=n("9sEH"),c=(n("qKvR"),{date:"2018-10-02",title:"Make a button/card with on hover state. Method 1: Vanilla CSS.",tags:["Code","Code Component","CSS","Framer"],sourceFile:"https://www.dropbox.com/s/8tyw448heiqii08/hover-css.framerx?dl=0",tweet:"https://twitter.com/lintonye/status/1047178754743828480",video:"hover-css.mp4",videoPoster:"hover-css.mp4.jpg",slug:"hover-css"}),p={meta:c},d=a.a;function s(e){var t=e.components,n=Object(i.a)(e,["components"]);return Object(r.b)(d,Object(o.a)({},p,n,{components:t,mdxType:"MDXLayout"}),Object(r.b)("p",null,"Canvas/preview are just browsers. What's running inside is just a web app."),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},'import "./style.css"')),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"className"),", not ",Object(r.b)("inlineCode",{parentName:"li"},"class")),Object(r.b)("li",{parentName:"ul"},"bonus: animate pseudo element, faster shadow anim")))}s.isMDXComponent=!0},MamX:function(e,t,n){"use strict";n.d(t,"a",(function(){return r}));var o=n("ODXe"),i=n("q1tI");function r(e,t,r){var a=Object(i.useState)(),c=a[0],p=a[1],d=Object(i.useState)(),s=d[0],m=d[1];return Object(i.useEffect)((function(){Promise.all([t?n("fjgo")("./".concat(e,"/").concat(t)):null,r?n("fjgo")("./".concat(e,"/").concat(r)):null]).then((function(e){var t=Object(o.a)(e,2),n=t[0],i=t[1];n&&p(n.default),i&&m(i.default)}))}),[e,t]),[c,s]}},ODXe:function(e,t,n){"use strict";n.d(t,"a",(function(){return i}));var o=n("BsWD");function i(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"!==typeof Symbol&&Symbol.iterator in Object(e)){var n=[],o=!0,i=!1,r=void 0;try{for(var a,c=e[Symbol.iterator]();!(o=(a=c.next()).done)&&(n.push(a.value),!t||n.length!==t);o=!0);}catch(p){i=!0,r=p}finally{try{o||null==c.return||c.return()}finally{if(i)throw r}}return n}}(e,t)||Object(o.a)(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}},S7tI:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/tips/hover-css",function(){return n("FmVU")}])},YfHv:function(e,t,n){"use strict";n.d(t,"a",(function(){return c}));var o=n("wx14"),i=n("Ff2n"),r=n("q1tI"),a=n("qKvR");function c(e){var t=e.play,n=void 0===t||t,c=e.videoUrl,p=e.posterUrl,d=Object(i.a)(e,["play","videoUrl","posterUrl"]),s=r.useRef(null);return r.useEffect((function(){var e=s.current;e&&(n?e.play():e.pause())}),[n,s]),Object(a.c)("video",Object(o.a)({ref:s,src:c,autoPlay:!1,loop:!0,muted:!0,playsInl

1ine:!0,poster:p},d))}},a3WO:function(e,t,n){"use strict";function o(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}n.d(t,"a",(function(){return o}))},fjgo:function(e,t,n){var o={"./":["Q/Sp",16],"./add-anchor-point-anywhere/cmd-add-anchor-point.mp4":["67tX",262],"./add-anchor-point-anywhere/cmd-add-anchor-point.mp4.jpg":["Id6X",263],"./add-anchor-point-anywhere/index.mdx":["LPtZ",0,187],"./add-frame-predefined-size/create-frame.mp4":["dQAr",264],"./add-frame-predefined-size/create-frame.mp4.jpg":["Rfc9",265],"./add-frame-predefined-size/index.mdx":["A5Y2",0,188],"./add-frame-same-size/create-frame-same-size.mp4":["IjSB",266],"./add-frame-same-size/create-frame-same-size.mp4.jpg":["b6gD",267],"./add-frame-same-size/index.mdx":["wYeK",0,189],"./add-image/index.mdx":["/v6y",0,190],"./animate-onload/animate-onload.mp4":["kJgr",268],"./animate-onload/animate-onload.mp4.jpg":["m9os",269],"./animate-onload/index.mdx":["w0Sw",0,191],"./change-default-code-editor/index.mdx":["gFce",0,192],"./children-connectors/children-connectors.mp4":["VRIy",270],"./children-connectors/children-connectors.mp4.jpg":["sfXe",271],"./children-connectors/index.mdx":["3bFR",0,19],"./children-connectors/multi-connector-with-titles.png":["IlmQ",272],"./cmd-select-item/cmd-select.mp4":["nHR2",273],"./cmd-select-item/cmd-select.mp4.jpg":["VdTr",274],"./cmd-select-item/index.mdx":["Ua0k",0,193],"./color-picker/color-picker.mp4":["5CtH",275],"./color-picker/color-picker.mp4.jpg":["Ou4M",276],"./color-picker/index.mdx":["euQB",0,194],"./commenting-in-javascript-react/index.mdx":["u9SM",0,195],"./copy-from-sketch/copy-from-sketch.mp4":["wwBB",277],"./copy-from-sketch/copy-from-sketch.mp4.jpg":["kRTb",278],"./copy-from-sketch/index.mdx":["+WhY",0,196],"./crop-image/crop-image.mp4":["pVX5",279],"./crop-image/crop-image.mp4.jpg":["dab6",280],"./crop-image/index.mdx":["Rh6N",0,197],"./custom-fonts/custom-fonts.mp4":["yrII",281],"./custom-fonts/custom-fonts.mp4.jpg":["cbS8",282],"./custom-fonts/font-manager.png":["Lfjk",283],"./custom-fonts/index.mdx":["Dc9/",0,180],"./day-night-mode/day-night-mode.mp4":["i/6O",284],"./day-night-mode/day-night-mode.mp4.jpg":["OkQl",285],"./day-night-mode/index.mdx":["h1kh",0,198],"./disable-auto-parenting/cmd-disable-auto-parenting.mp4":["hcN5",286],"./disable-auto-parenting/cmd-disable-auto-parenting.mp4.jpg":["YySF",287],"./disable-auto-parenting/index.mdx":["z91a",0,199],"./dropdown-menu-effect/dropdown-menu-distorted.gif":["tXF7",288],"./dropdown-menu-effect/dropdown-menu.mp4":["5as/",289],"./dropdown-menu-effect/dropdown-menu.mp4.jpg":["CiQO",290],"./dropdown-menu-effect/index.mdx":["UYA8",0,18],"./dropdown-menu-effect/menu-layers.png":["Uf8N",291],"./duration-unit/index.mdx":["uhz7",0,200],"./export-web-preview/index.mdx":["MvV6",0,201],"./fluid-grid/fluid-grid-inspect.jpeg":["9z9u",292],"./fluid-grid/fluid-grid.mp4":["l7bG",293],"./fluid-grid/fluid-grid.mp4.jpg":["Nv+M",294],"./fluid-grid/index.mdx":["8Nn7",0,181],"./git-integration/framerfx.png":["/EJQ",295],"./git-integration/framerx-folder.png":["huPN",296],"./git-integration/index.mdx":["bL9B",0,179],"./git-integration/save-as.png":["SzRx",297],"./hold-shift-while-drawing/hold-shift.mp4":["VF35",298],"./hold-shift-while-drawing/hold-shift.mp4.jpg":["h8dE",299],"./hold-shift-while-drawing/index.mdx":["rEjT",0,202],"./hover-css/hover-css.mp4":["LvI3",300],"./hover-css/hover-css.mp4.jpg":["bHeZ",301],"./hover-css/index.mdx":["FmVU",0,203],"./hover-pose/hover-pose.mp4":["BvBs",302],"./hover-pose/hover-pose.mp4.jpg":["K8KI",303],"./hover-pose/index.mdx":["j1XD",0,204],"./hover-react-spring/hover-react-spring.mp4":["OW1+",304],"./hover-react-spring/hover-react-spring.mp4.jpg":["3IDD",305],"./hover-react-spring/index.mdx":["sEVe",0,205],"./hover-styled-components/hover-css.mp4":["KM1+",306],"./hover-styled-components/hover-css.mp4.jpg":["H1Xo",307],"./hover-styled-components/index.mdx":["LRlN",0,206],"./import-json/import-json-error.png":["6WEi",308],"./import-json/index.mdx":["CXEp",0,182],"./index":["Q/Sp",16],"./index.tsx":["Q/Sp",16],"./install-npm-packages/index.mdx":["mkE4",0,207],"./internal-components/default-export-warning.png":["Y2cu",309],"./internal-components/index.mdx":["cwCM",0,183],"./keep-page-and-slider-in-sync/index.mdx":["lJ6/",0,208],"./keep-page-and-slider-in-sync/page-and-slider.mp4":["wIPt",310],"./keep-page-and-slider-in-sync/page-and-slider.mp4.jpg":["Z3js",311],"./layout-with-stack-then-remove/index.mdx":["/Tki",0,209],"./layout-with-stack-then-remove/use-and-remove-stack.mp4":["R/dr",312],"./layout-with-stack-then-remove/use-and-remove-stack.mp4.jpg":["EspQ",313],"./local-resources/index.mdx":["NDER",0,184],"./local-resources/local-resources.png":["O+X6",314],"./material-app-bar/index.mdx":["b3Aw",0,210],"./material-app-bar/material-app-bar.mp4":["xHJs",315],"./material-app-bar/material-app-bar.mp4.jpg":["QODL",316],"./media/better-menu.mp4":["46ag",317],"./media/better-menu.mp4.jpg":["3XjL",318],"./media/draggable.mp4":["cbe7",319],"./media/draggable.mp4.jpg":["c/Kl",320],"./media/menu-layers.jpg":["l2uk",321],"./page-hint/index.mdx":["3R+3",0,211],"./page-hint/page-hint.mp4":["1LYQ",322],"./page-hint/page-hint.mp4.jpg":["pajx",323],"./page-in-overlay/index.mdx":["hY6D",0,212],"./page-in-overlay/page-in-overlay.mp4":["rjQP",324],"./page-in-overlay/page-in-overlay.mp4.jpg":["uEjf",325],"./preview-1-1/index.mdx":["YcG3",0,213],"./preview-1-1/preview-1-1.mp4":["lzp9",326],"./preview-1-1/preview-1-1.mp4.jpg":["WWlF",327],"./preview-in-any-browser/index.mdx":["0RTe",0,214],"./react-developer-tool/chrome-dev-tools.png":["c5m7",328],"./react-developer-tool/index.mdx":["+bcQ",0,185],"./resize-ignore-position-pins/cmd-to-ignore-pins.mp4":["AXH5",329],"./resize-ignore-position-pins/cmd-to-ignore-pins.mp4.jpg":["WnvN",330],"./resize-ignore-position-pins/index.mdx":["8D1o",0,215],"./schedule-with-timeout/index.mdx":["N8A9",0,216],"./schedule-with-timeout/schedule-with-timeout.mp4":["KZng",331],"./schedule-with-timeout/schedule-with-timeout.mp4.jpg":["BYfo",332],"./select-parent/escape-to-select-parent.mp4":["bAfH",333],"./select-parent/escape-to-select-parent.mp4.jpg":["B0lk",334],"./select-parent/index.mdx":["FQIL",0,217],"./simple-text-input/index.mdx":["P3+m",0,218],"./simple-text-input/text-input.mp4":["/v3I",335],"./simple-text-input/text-input.mp4.jpg":["yYh1",336],"./splash-screen/index.mdx":["Vqd6",0,186],"./splash-screen/page-component.png":["oamK",337],"./splash-screen/splash-screen.mp4":["nxpA",338],"./splash-screen/splash-screen.mp4.jpg":["tTI0",339],"./staggered-animation/index.mdx":["XRFE",0,219],"./staggered-animation/staggered.mp4":["UUTo",340],"./staggered-animation/staggered.mp4.jpg":["0jYE",341],"./switch-overlay-all-manual/index.mdx":["b1uA",0,220],"./switch-overlay-all-manual/switch-between-overlays.mp4":["oQp0",342],"./switch-overlay-all-manual/switch-between-overlays.mp4.jpg":["8mfr",343],"./symbol-link/index.mdx":["WGJe",0,221],"./text-input-change-text-from-outside/change-input-text-from-outside.mp4":["SLF3",344],"./text-input-change-text-from-outside/change-input-text-from-outside.mp4.jpg":["s3yZ",345],"./text-input-change-text-from-outside/index.mdx":["UYqI",0,20],"./text-input-keypress/index.mdx":["0dTa",0,222],"./text-input-keypress/text-input-keypress.mp4":["/MPi",346],"./text-input-keypress/text-input-keypress.mp4.jpg":["CBlf",347],"./text-input-mobile-keyboard/index.mdx":["d1+E",0,223],"./text-input-mobile-keyboard/text-input-android-keyboard.mp4":["yLch",348],"./text-input-mobile-keyboard/text-input-android-keyboard.mp4.jpg":["FpDW",349],"./text-wrap/index.mdx":["8p/0",0,224],"./text-wrap/text-wrapping.mp4":["ypRf",350],"./text-wrap/text-wrapping.mp4.jpg":["gFG+",351],"./themeProvider-styled-components/index.mdx":["afCF",0,225],"./themeProvider-styled-components/theme-provider.mp4":["b+lb",352],"./themeProvider-styled-components/theme-provider.mp4.jpg":["ffMa",353],"./toggle-handles/index.mdx":["QtBK",0,226],"./toggle-handles/option-toggle-control-point-modes.mp4":["OU29",354],"./toggle-handles/option-toggle-control-point-modes.mp4.jpg":["jSJl",355],"./vector-in-design-component/edit-instance-vector.mp4":["12jc",356],"./vector-in-design-component/edit-instance-vector.mp4.jpg":["cbTE",357],"./vector-in-design-component/index.mdx":["DjFP",0,227],"./vsc-multi-select/index.mdx":["BzD6",0,228],"./vsc-multi-select/multi-cursor.mp4":["0Er3",358],"./vsc-multi-select/multi-cursor.mp4.jpg":["baRK",359],"./vue/index.mdx":["uq4T",0,229],"./why-all-buttons-bounce-1/all-buttons-bounce.mp4":["Uz+h",360],"./why-all-buttons-bounce-1/all-buttons-bounce.mp4.jpg":["KrOZ",361],"./why-all-buttons-bounce-1/index.mdx":["UoWg",0,21],"./why-all-buttons-bounce-2/all-buttons-bounce.mp4":["mA6k",362],"./why-all-buttons-bounce-2/all-buttons-bounce.mp4.jpg":["YmTl",363],"./w

1hy-all-buttons-bounce-2/index.mdx":["jQtC",0,230],"./width-height-props/index.mdx":["KdD2",0,231]};function i(e){if(!n.o(o,e))return Promise.resolve().then((function(){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}));var t=o[e],i=t[0];return Promise.all(t.slice(1).map(n.e)).then((function(){return n(i)}))}i.keys=function(){return Object.keys(o)},i.id="fjgo",e.exports=i},soUV:function(e,t,n){"use strict";n.d(t,"a",(function(){return d}));n("q1tI");var o=n("qKvR");function i(){return Object(o.c)("footer",{className:"bg-gray-900 text-white w-full py-12 mt-8"},Object(o.c)("div",{className:"max-w-max mx-auto md:ml-16"},"(c) LearnReact.design 2021"))}var r=n("jrVH"),a=n("9ixD"),c=n("29X9"),p=n("20a2");function d(e){var t=e.children,n=Object(p.useRouter)(),d=c.siteUrl+n.pathname;return Object(o.c)("div",{className:"min-h-screen flex flex-col"},Object(o.c)(a.b,{canonical:d,openGraph:{url:d}}),Object(o.c)(r.a,null),Object(o.c)("div",{className:"flex-1"},t),Object(o.c)(i,null))}}},[["S7tI",1,2,0,3,4,5]]]);