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。

希望这有帮助。

如何只选择DOM中元素之前的兄弟节点？

2 个答案: