title: How can I accomplish this without use of javascript?
body: <p>I've got a page with a thumbnail on it (more to come, so the float:left property is necessary). The thumbnail is a Div, with an anchor in it, in that anchor is an image and some text. The text is below the image. The ancho rinks to a pdf file. Simple.</p>
  
  <p><a href="http://www.bridgecitymedical.com/forms" rel="nofollow">http://www.bridgecitymedical.com/forms</a></p>
  
  <p>The problem is that the text gets underlined on hover when you hover over it, and the thumb image gets a border and the text gets underlined when you hover over the thumb image. What I need is for then you hover over either the text or the image, that they BOTH get applied their respective hover states, e.g. image gets a border, text gets underlined. At the moment they function by themselves, but they need to be one, or it just looks odd.</p>
  
  <p>Here's the markup:</p>
  
  <pre><code>&lt;div class="form"&gt;
      &lt;a href="/wp-content/uploads/forms/Adolescent New Patient Paperwork.pdf" target="_blank"&gt;
          &lt;div class="form-wrapper"&gt;
          &lt;div class="form-thumb"&gt;
              &lt;img src="/forms/thumbs/1.jpg" alt="" /&gt;
          &lt;/div&gt;
          Caption
          &lt;/div&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the css...</p>
  
  <pre><code>.form {
      margin: 30px;
      font-size:.8em;
      width: 137px;
      text-align: center;
  }
  .form-thumb{
      width: 125px;
      height: 150px;
      padding:5px;
      border: 1px solid rgba(0,0,0,.2);
      float:left
  }
  .form-thumb:hover{
      border: 1px solid #000;
  }
  </code></pre>
  
  <p>The text underline comes from another part of the tylesheet by default.</p>
  
  <p><strong>Can I do this without javascript!?</strong></p>
  
  <p>Solved by Chris (selected answer). Here's his solution, with my thumb in a fiddle...</p>
  
  <p><a href="http://jsfiddle.net/7MLjZ/1/" rel="nofollow">http://jsfiddle.net/7MLjZ/1/</a></p>