title: how to change circle color when click on div?
body: <p>I have 4 div that when hover each of them <code>background-color</code> change to some color. now I want when click each of them change color of a circle with SVG tag. my codes are below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#a1,
  #a2,
  #a3,
  #a4 {
    display: inline-block;
    position: relative;
    border: 2px solid black;
    width: 100px;
    height: 100px;
  }
  
  #a1:hover {
    background-color: orangered;
  }
  
  #a2:hover {
    background-color: green;
  }
  
  #a3:hover {
    background-color: blue;
  }
  
  #a4:hover {
    background-color: yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="width:25%; margin:auto; text-align:center;"&gt;
    &lt;div id="a1"&gt;&lt;/div&gt;
    &lt;div id="a2"&gt;&lt;/div&gt;
    &lt;div id="a3"&gt;&lt;/div&gt;
    &lt;div id="a4"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;svg id="b" height="100" width="100"&gt;
     &lt;circle cx="50" cy="50" r="40"  /&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can I do this just with CSS?? because I don't want use JavaScript or JQuery...</p>