javascript - 如何只选择 DOM 中元素之前的 sibling ？

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);