title: HTML/CSS issue with a:hover and spans
body: <p>Any way I can get this working?</p>
  
  <p>I have a block of code:</p>
  
  <pre><code>&lt;p&gt;&lt;a href="http://foo.com"&gt;&lt;span class="title"&gt;Title&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;
  Some text no greater than a couple of lines...&lt;/a&gt;&lt;/p&gt;
  </code></pre>
  
  <p>My styles are:</p>
  
  <pre><code>p {color:#FFF;}
  a {color:#999;}
  .title {color:#FFF; font-weight:bold;}
  a:hover {color:#FF0;}
  </code></pre>
  
  <p>My problem is as follows:</p>
  
  <p>I want the title to be white and bold and the body to be gray, but when you hover over any part, I want the title AND text to become yellow.  However, in the above scenario, only the text becomes yellow because the span color (white) overrides the a:hover.</p>
  
  <p>If I add:</p>
  
  <pre><code>.title:hover {color:#FF0;}
  </code></pre>
  
  <p>then the title color only changes if I specifically hover over the title.  It also doesn't change the text to yellow, as it is now a span hover...</p>
  
  <p>Any way I can resolve this, even if it requires a little JS?</p>
  
  <p>Thanks!</p>