Skip to content

Commit e2a6506

Browse files
author
Florian Rivoal
committed
Add an example to the hover media feature
1 parent ee40413 commit e2a6506

2 files changed

Lines changed: 23 additions & 2 deletions

File tree

css4-mediaqueries/Overview.html

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,11 @@
2525

2626
<h1 id=media-queries>Media Queries Level 4</h1>
2727

28-
<h2 class="no-num no-toc" id=w3c-working>Editor's Draft 21 May 2012</h2>
28+
<h2 class="no-num no-toc" id=w3c-working>Editor's Draft 22 May 2012</h2>
2929

3030
<dl>
3131
<dt>This Version:</dt>
32-
<!-- <dd><a href="http://www.w3.org/TR/2012/ED-css4-mediaqueries-20120521//">http://www.w3.org/TR/2012/ED-css4-mediaqueries-20120521/</a></dd> -->
32+
<!-- <dd><a href="http://www.w3.org/TR/2012/ED-css4-mediaqueries-20120522//">http://www.w3.org/TR/2012/ED-css4-mediaqueries-20120522/</a></dd> -->
3333

3434
<dd><a
3535
href="http://dev.w3.org/csswg/css4-mediaqueries/">http://dev.w3.org/csswg/css4-mediaqueries/</a>
@@ -1096,6 +1096,16 @@ <h3 id=hover><span class=secno>4.15. </span>hover</h3>
10961096
<p>Only 0 and 1 are valid values. (This includes -0.) Thus everything else
10971097
creates a malformed media query.
10981098

1099+
<div class=example>
1100+
<pre><code>/* Only use a hover-activated drop down menu on devices that can hover. */
1101+
@media (hover) {
1102+
.menu &gt; li {display:inline-block;}
1103+
.menu ul {display:none; position:absolute;}
1104+
.menu li:hover ul {display:block; list-style:none; padding:0;}
1105+
/* ... */
1106+
}</code></pre>
1107+
</div>
1108+
10991109
<h2 id=values><span class=secno>5. </span>Values</h2>
11001110

11011111
<p>Value types not defined in this specification, such as &lt;integer&gt;,

css4-mediaqueries/Overview.src.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -965,6 +965,17 @@ <h3 id="hover">hover</h3>
965965
<p>Only 0 and 1 are valid values. (This includes -0.) Thus everything else
966966
creates a malformed media query.</p>
967967

968+
<div class="example">
969+
<pre><code>/* Only use a hover-activated drop down menu on devices that can hover. */
970+
@media (hover) {
971+
.menu &gt; li {display:inline-block;}
972+
.menu ul {display:none; position:absolute;}
973+
.menu li:hover ul {display:block; list-style:none; padding:0;}
974+
/* ... */
975+
}</code></pre>
976+
</div>
977+
978+
968979
<h2 id="values">Values</h2>
969980

970981
<p>Value types not defined in this specification, such as &lt;integer&gt;,

0 commit comments

Comments
 (0)