Как выбрать только братьев и сестер, которые находятся перед элементом в DOM?

Question

Когда я нависаю над кольцом, я хотел бы, чтобы кольцо зависало, и все кольца под ним были окрашены. Например: Если я нахожусь над ring_two_fill_1, я бы хотел, чтобы ring_one_fill_1 был заполнен, а также ring_two_fill_1. Я делаю график прогресса, который отображает уровень, на котором вы находитесь.

<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

Да, вам в основном нужно будет использовать метод next(). Вот пример такой функциональности для простого списка:

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

Попробуйте использовать Jquery next() метод и hover событие:

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

ПРИМЕЧАНИЕ: Вы пропустите кавычку " после Avery class="ring-fill.

Надеюсь, это поможет.