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.

Thanks to everyone who answered. – Eric Keyte Jan 13 '17 at 16:02 — Eric Keyte, Jan 13 '17 at 16:02

score 2 · Answer 1 · edited May 23 '17 at 11:46

2

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.

edited May 23 '17 at 11:46

Community

1
1

answered Jan 12 '17 at 22:46

Marvin

9,164
3
26
44

Great answer @Marvin! – Vcasso Jan 12 '17 at 22:49
Glad I could help. Make sure to [accept the answer](http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work/5235#5235), to inform others that the issue is resolved. – Marvin Jan 18 '17 at 18:09

score 1 · Answer 2 · answered Jan 12 '17 at 23:30

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>

score 0 · Answer 3 · answered Jan 12 '17 at 22:49

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."

Show siblings when I hover over an element

3 Answers3