Permalink
Browse files

Make this recipe have a working example.

  • Loading branch information...
1 parent 26e3104 commit 3d3a08894d2f8856bae719f8bf8fc1c1e0051b3b @chriseppstein committed Aug 11, 2010
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <title>Hover Visibility Example</title>
+ <link rel="stylesheet" href="hover-visibility.css" type="text/css" media="screen">
+ </head>
+ <body>
+ <div class="container">
+ <h1>A Container</h1>
+ <p>This container has stuff that you can only see
+ when you hover over it.</p>
+ <div id="contained" class="within-container">
+ You must be hovering.
+ <a href="javascript:document.getElementById('contained').className = 'within-container sticky'">Click to stick.</a>
+ </div>
+ </div>
+ </body>
+</html>
@@ -0,0 +1,30 @@
+/* line 14, hover-visibility.sass */
+.container {
+ width: 400px;
+ border: 10px solid #777777;
+ margin: 100px auto;
+ text-align: center;
+}
+
+/* line 20, hover-visibility.sass */
+.within-container {
+ visibility: hidden;
+ opacity: 0;
+ -moz-transition-property: opacity visibility;
+ -webkit-transition-property: opacity visibility;
+ -o-transition-property: opacity visibility;
+ transition-property: opacity visibility;
+ -moz-transition-duration: 0.333s;
+ -webkit-transition-duration: 0.333s;
+ -o-transition-duration: 0.333s;
+ transition-duration: 0.333s;
+ -moz-transition-timing-function: ease;
+ -webkit-transition-timing-function: ease;
+ -o-transition-timing-function: ease;
+ transition-timing-function: ease;
+}
+/* line 22, hover-visibility.sass */
+.container:hover .within-container, .within-container.sticky {
+ visibility: visible;
+ opacity: 1;
+}
@@ -11,8 +11,14 @@
visibility: visible
opacity: 1
-div.within-container
+.container
+ width: 400px
+ border: 10px solid #777
+ margin: 100px auto
+ text-align: center
+
+.within-container
+hover-visiblity-hidden
- .container &,
+ .container:hover &,
&.sticky
+hover-visibility-visible

0 comments on commit 3d3a088

Please sign in to comment.