title: Change color of sibling elements on hover using CSS
body: <p>In my HTML below, when I hover on the <code>&lt;a&gt;</code> element I want to change the colour of the <code>&lt;h1&gt;</code> element using only CSS. Is there a way to achieve this?</p>
  <pre class="lang-html prettyprint-override"><code>&lt;h1&gt;Heading&lt;/h1&gt;
  &lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;&lt;/a&gt;
  </code></pre>
  <p>What if I wrap a div around it with an id in it?</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;banner&quot;&gt;
      &lt;h1&gt;Heading&lt;/h1&gt;
      &lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Will this help?</p>