title: How to select only the siblings that are before the element in the DOM?
body: <p>When I hover over a ring I would like the ring hovered and all the rings under it to be colored in as well. For example: If I hover over ring_two_fill_1 I would like ring_one_fill_1 to be filled in as well as ring_two_fill_1. I am making a progress graphic that displays the level you are at.</p>
  
  <pre><code>&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="615.7px"
   height="621px" viewBox="0 0 615.7 621" enable-background="new 0 0 615.7 621" xml:space="preserve"&gt;
  
      &lt;g id="level_one"&gt;
          &lt;path id="ring_three_fill_1" class="ring-fill"/&gt;
          &lt;path id="ring_two_fill_1" class="ring-fill"/&gt;
          &lt;path id="ring_one_fill_1" class="ring-fill"/&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>