如何只选择DOM中元素之前的兄弟姐妹？

Question

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.

<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">

    <g id="level_one">
        <path id="ring_three_fill_1" class="ring-fill"/>
        <path id="ring_two_fill_1" class="ring-fill"/>
        <path id="ring_one_fill_1" class="ring-fill"/>
    </g>
</svg>

Answer 1

Yea, you'll basically have to end up using next() method. Here's an example of such functionality for a simple list:

HTML:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>

CSS:

  ul {
    list-style: none;
    width: 50%;
    text-align: center;
  }
  ul li {
    padding: 10px;
    margin: 2px 0;
    background-color: lightpink;
  }
  ul li.active {
    background-color: lightgreen;
  }

jQuery:

var lis = $('li');
function hoverIn () {
    $(this).addClass("active");
    if($(this).next().length != 0) {
        hoverIn.call($(this).next(), null); 
    } else {
        return;
    }
}
function hoverOut () {
    lis.removeClass("active");
}
lis.on("mouseenter", hoverIn);
lis.on("mouseleave", hoverOut);

Answer 2

Try to use Jquery next() method and hover event :

$('body').on('hover', '.ring-fill', function(){
     $(this).css('color', 'GREEN');
     $(this).next('.ring-fill').css('color', 'GREEN');
});

NOTE : You miss double quote " after avery class="ring-fill .

Hope this helps.