如何 select 仅 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

尝试使用Jquerynext()方法和hover事件:

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

注意： 你在每 class="ring-fill.

之后错过了双引号 "

希望对您有所帮助。

Answer 2

是的，您基本上必须最终使用 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);

如何 select 仅 DOM 中元素之前的兄弟姐妹？

How to select only the siblings that are before the element in the DOM?

javascript

css

jquery

svg

siblings