title: Controlling parent element based on child input:focus
body: <p>I have a <code>&lt;div&gt;</code> element containing a <code>&lt;form&gt;</code> element with an <code>&lt;input&gt;</code> field. This div also contain a <code>&lt;button&gt;</code> that is hidden via overflow:hidden.</p>
  
  <p><a href="http://imgur.com/oiIacIw" rel="nofollow">Illustration</a></p>
  
  <p>When a user click on the input field, its height will change, and the overflow:hidden will become overflow:visible. The first effect I can achieve with input:focus, but I am having problem with the second targeting the parent . I understand that selector can't ascend in CSS3, so I tried to use jQuery has() function, but it doesn't seem to work (probably entirely my fault).</p>
  
  <p>This is what I tried:</p>
  
  <pre><code>&lt;script&gt;
    $("div:has(input:focus)").addClass("visible");
  &lt;/script&gt;
  </code></pre>
  
  <p>Am I doing this incorrectly? What can I do to achieve the desired effect?</p>