noahlt · April 22, 2012 18:25
diff --git a/hi.html b/hi.html
 <html>
 <head>
 <style>
 body * { background-color: #FCF0AD; }
 body *:hover { background-color: blue; }
 *:hover { background-color: blue; }
 body li:hover { background-color: red; }
 </style>

 <body>
  <h1>body *:hover</h1>
  <p>I want to replicate a Firebug-style hover-to-highlight. In this
  test page, I tried to create the effect by adding
  a <code>background-color</code> to all elements:</p>
 <pre><code>body * { background-color: #FCF0AD; }
 body *:hover { background-color: yellow; }
 *:hover { background-color: yellow; }
 </code></pre>
  <p>The first line successfully adds a background color to all
  elements. But while the second and third line successfully adds a
  hover state to the links, it doesn't add a hover state to any of the
  other elements.</p>
  <p>This is surprising.  We know the <code>body *</code> selector
  works because all the elements get highlighted by it.  We also know
  that we can apply hover states to non-link elements, because I added
  this line:</p>
  <pre><code>body li:hover { background-color: red; }</code></pre>
  <p>which successfully adds a hover state to the <code>li</code> elements.  Why doesn't <code>body *:hover</code> work?</p>
  <hr>
  <h2>the rest of this page is just html lorem ipsum for testing purposes</h2>
  <div id="menu">
    <a href="#">some</a>
    <a href="#">menu</a>
    <a href="#">items</a>
    <input id="btn1" type="button" value="button!"></input>
  </div>
  <input id="btn2" type="button" value="btn2"></input>
  <h3>todo</h3>
  <ol>
    <li>firebug-style highlight-and-edit-html</li>
    <li>webkit-style html to js event mapping</li>
    <li>interactive debugging</li>
  </ol>

  <h3>In the distant </h3>
  <ul>
    <li>HTML5 CodeMirror mode</li>
    <li>better notifications</li>
    <li>actually check that the files get saved</li>
    <li>auth</li>
    <li>rip out tooling and deploy</li>
  </ul>
 </body>
 </head>
	<html>
	<head>
	<style>
	body * { background-color: #FCF0AD; }
	body *:hover { background-color: blue; }
	*:hover { background-color: blue; }
	body li:hover { background-color: red; }
	</style>

	<body>
	<h1>body *:hover</h1>
	<p>I want to replicate a Firebug-style hover-to-highlight. In this
	test page, I tried to create the effect by adding
	a <code>background-color</code> to all elements:</p>
	<pre><code>body * { background-color: #FCF0AD; }
	body *:hover { background-color: yellow; }
	*:hover { background-color: yellow; }
	</code></pre>
	<p>The first line successfully adds a background color to all
	elements. But while the second and third line successfully adds a
	hover state to the links, it doesn't add a hover state to any of the
	other elements.</p>
	<p>This is surprising. We know the <code>body *</code> selector
	works because all the elements get highlighted by it. We also know
	that we can apply hover states to non-link elements, because I added
	this line:</p>
	<pre><code>body li:hover { background-color: red; }</code></pre>
	<p>which successfully adds a hover state to the <code>li</code> elements. Why doesn't <code>body *:hover</code> work?</p>
	<hr>
	<h2>the rest of this page is just html lorem ipsum for testing purposes</h2>
	<div id="menu">
	<a href="#">some</a>
	<a href="#">menu</a>
	<a href="#">items</a>
	<input id="btn1" type="button" value="button!"></input>
	</div>
	<input id="btn2" type="button" value="btn2"></input>
	<h3>todo</h3>
	<ol>
	<li>firebug-style highlight-and-edit-html</li>
	<li>webkit-style html to js event mapping</li>
	<li>interactive debugging</li>
	</ol>

	<h3>In the distant </h3>
	<ul>
	<li>HTML5 CodeMirror mode</li>
	<li>better notifications</li>
	<li>actually check that the files get saved</li>
	<li>auth</li>
	<li>rip out tooling and deploy</li>
	</ul>
	</body>
	</head>