Show siblings when I hover over an element

Question

I have a span element that's classed. When I hover over a child element, I want the siblings to all fade in. How can I achieve this?

SCSS code

.move-tools {
    > a {
        opacity: 0.0;

        a ~ a:hover {
            opacity: 1.0;
            transition: opacity 0.5s ease-in-out;
        }

        &:hover {
            opacity: 1.0;
            transition: opacity 0.5s ease-in-out;
        }
    }
}

HTML code

<div>
    <span class="move-tools">
        <a href title="Move to bottom">Move to bottom</a>
        <a href title="Move down one place">Move down</a>
        <a href title="Move up one place">Move up</a>
        <a href title="Move to top">Move to top</a>
    </span>
</div>

Here's a link to the JSFiddle.

I tried to use the a ~ a selector to bring the opacity of the sibling elements through, but I think I'm misunderstanding the documentation.

Answer 1

Your code says that you need to hover the siblings to fade them in. The correct logic would be to react on the hover over your a and the select the siblings. Updated JSFiddle .

.move-tools {
  > a {
    opacity: 0.0;

    &:hover ~ a {
        opacity: 1.0;
        transition: opacity 0.5s ease-in-out;
    }

    &:hover {
        opacity: 1.0;
        transition: opacity 0.5s ease-in-out;
    }
  }
}

Unfortunately you can't select previous siblings this way. A possible workaround would be to use some javascript that selects the previous siblings of the hovered element. Another version of the JSFiddle with JQuery .

Answer 2

you can set opacity to every links once you hover the span and then overwrite the opacity when you hover a link:

.move-tools:hover {
   a {
    opacity: 0.0;
      transition: opacity 0.5s ease-in-out;
    }

    & a:hover {
      opacity: 1.0;
    }
  }

html&css snippet for demo or fiddle

 .move-tools:hover a { opacity: 0.0; transition: opacity 0.5s ease-in-out; } .move-tools:hover a:hover { opacity: 1.0; } 

 <div> <span class="move-tools"> <a href title="Move to bottom">Move to bottom</a> <a href title="Move down one place">Move down</a> <a href title="Move up one place">Move up</a> <a href title="Move to top">Move to top</a> </span> </div> 

Answer 3

You might need to use javascript/jQuery because CSS cannot select previous siblings, only following siblings. It's a bummer.

But going with what you have, the next siblings aren't lighting up because a ~ a:hover should be a:hover ~ a, which is "When I hover over a, select its siblings."