title: Css hover child to trigger effect on parent
body: <p>I have this HTML code:</p>
  
  <pre><code>&lt;span id="search"&gt;
   &lt;input type="submit" value="" id="button"&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>I want to change the opacity of <code>#search::after</code> when hovering <code>#button</code></p>
  
  <pre class="lang-css prettyprint-override"><code>#button:hover #search::after {opacity:1;}
  </code></pre>
  
  <p>It wont work so I wonder if its even possible to do this.</p>