Is there anyway to style the previous/prior sibling elements using only css?

Question

I want to style 4 siblings so that when I hover over one of them the opacity of other 3 siblings changes (dim out)

[+ ~] these combinator selectors only applies on the followed/ next / coming siblings not for the previous/prior ones .. so the style applies only on the first sibling as there's no other siblings come before it..but don't apply for the rest siblings!

Here's the code I was working on :

https://code.sololearn.com/WZcNM90uJoIa/?ref=app

Here's the part I'm referring to:

.bar1:hover + .bar2,
.bar1:hover ~ .bar3,
.bar1:hover ~ .bar4{
opacity: 0.3;
}

.bar2:hover ~ .bar1,
.bar2:hover + .bar3,
.bar2:hover ~ .bar4{
opacity: 0.3;
}

.bar3:hover ~ .bar1,
.bar3:hover ~ .bar2,
.bar3:hover + .bar4{
opacity: 0.3;
}

.bar4:hover ~ .bar1,
.bar4:hover ~ .bar2,
.bar4:hover ~ .bar3{
opacity: 0.3;
}

Answer 1

Ah... I just tested this on my computer and can see the problem.

Here is a fix that should work.

https://code.sololearn.com/WB10Vslkv3kq/

You will need to apply the following changes:

---------------
HTML:
---------------
- Wrap the .bar items within a new parent .bars element.

<div class="bars">
<div class="bar bar1"> ... </div>
<div class="bar bar2"> ... </div>
<div class="bar bar3"> ... </div>
<div class="bar bar4"> ... </div>
</div>

---------------
CSS:
---------------
- Replace lines 76 - 94 with the following lines:

input[type="checkbox"]:checked ~ .bars > .bar{

transform: translateX(31.5vw);
}

/* ************************** */

- Replace lines 100 - 122 with the following lines:

.bars:hover > .bar {
opacity: 0.3;
}

.bars:hover > .bar:hover {
opacity: 1;
}

/* ************************** */

That should get you squared away.

Answer 2

Silver Key Nice idea... 😉👌

However, I just tested with and without the pointer-events and didn't see a difference.

Are you seeing a differences?

Answer 3

Gordon David Carroll if you can help or at least mention people that can help i love your helpful answers

Answer 4

David Carroll
Yes i tried it and it's perfect exactly as i wanted ... thank you for your effort.

Answer 5

David Carroll just for sharing the knowledge .. I've found another way to do it .. and i think it's more efficient.

================================

.bars {
pointer-events: none; ==> /* tells the browser to ignore mouse events on the element and ALL children. */
}

nav .bar {
pointer-events: auto; ==> /* it tells the child element to listen to the mouse again */
}

.bars:hover > * {
opacity: 0.3;
}

.bars:hover > *:hover {
opacity: 1;
}

Answer 6

In my first code there was a gap between each bar when i hover mouse on these gaps they all fade out..
So i had to concatenate them to hide those gaps .. now i can make those gaps again without countering the same issue

Answer 7

Hafsa Hussein Mohammed thanks alot

Answer 8

Silver Key Sure... assuming you only want to set opacity on the other bars when one of them is being hovered over, then remove all those styles listed in this question and replace them with the following:

nav:hover > .bar {
opacity: 0.3;
}

nav:hover > .bar:hover {
opacity: 1;
}

You'll need to test this... I'm not in front of a computer where I can test hover effect. But, I'm guessing this or something like this should work.

Answer 9

David Carroll
Thank you for your answer .. that was really helpful ..

It works fine but when i click on the menu the intial style of all bars is opacity 0.3 instead of 1 then when i hover on one bar it's opacity changes to 1 ...

This is a work around .. i believe there is no way in css to style prior siblings.

Anyway thank you for your help 🙂

Answer 10

I'm comfortable with firefox i do most of my code on it ...but i tested it on chrome too the issue still exist on both browsers ..but I'm on my laptop.

Answer 11

Interesting... thanks for clarifying. I'll need to test on various browsers to learn more. 🙏

Answer 12

Silver Key Have you had a chance to test the fix I applied?

Answer 13

Interesting... I don't have that problem.

I'm testing on Samsung Note 8 and Chrome browser for desktop. What are you testing on?