How to select only the siblings that are before the element in the 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>

You write "before" in your title but elements you refer to in code sample is "after", so is it "before" or "after"? ... If "before" in code structure, you need script, otherwise css hover works: http://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element-has — Asons, Dec 02 '15 at 20:00

score 1 · Accepted Answer · answered Dec 02 '15 at 19:54

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

Thanks. How do I add the class to the path? Just adding a class is not doing anything. — nehas, Dec 02 '15 at 20:11
Can't use addClass with SVG. Works now like this: `$(this).attr("class", "ring-fill active");` — nehas, Dec 02 '15 at 20:28

Zakaria Acharki · Answer 2 · 2015-12-02T19:29:34.063

0

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.

edited Dec 02 '15 at 19:29

answered Dec 02 '15 at 19:23

Zakaria Acharki

66,747
15
75
101

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

2 Answers2