Changing an unrelated div on hover

Question

Is there a purely (S)CSS solution to change an unrelated (i.e. not a sibling or a child) div on hover, as I am trying to do in the code below?

.blue,.green {
  width: 5rem;
  height: 3rem;
  margin: 1rem;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
  &:hover {
    background-color: lightgreen;
  }
  &:hover .blue {
    background-color: lightblue; // trying to effect this change
  }
}

<div>
  <div class="blue" />
</div>

<div>
  <div class="green" />
</div>

Here is the CodePen.

Update: the reply by @alekskorovin is outstanding and deserves many upvotes!

@Arkellys See the reply. – AlwaysLearning Dec 02 '21 at 08:59 — AlwaysLearning, Dec 02 '21 at 08:59

aleks korovin · Accepted Answer · 2021-11-28T15:48:56.980

0

In CSS there are possibilities to use the same parent and common classes and :not selector together with CSS variables. As far as I could understand the thing is to set some common properties when you hover on some of the items. If it's possible to have a common parent element you could consider that example (https://codepen.io/alekskorovin/pen/bGobvzG):

:root {
  --bg: rgba(255, 255, 255, 0.3);
}
.one {
  background: blue;
}
.two {
  background: green;
}
.common {
  margin: 1rem;
  border: solid 0.1rem grey;
  position: relative;
}
.common:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--bg);
}

.parent:not(div:hover) {
  --bg: rgba(255, 255, 255, 0);
}

<div class="parent">
<article><div class="one common">One</div></article>
<article><div class="two common">Two</div></article>
</div>

edited Nov 28 '21 at 15:48

answered Nov 28 '21 at 15:34

aleks korovin

724
4
6

OP clearly states these are not siblings – Paulie_D Nov 28 '21 at 15:43
I've added wrappers as `` - still works. – aleks korovin Nov 28 '21 at 15:49
@alekskorovin Can you make it so that hovering on green results in change of green, but not of blue? – AlwaysLearning Nov 28 '21 at 17:21
@AlwaysLearning something like that? https://codepen.io/alekskorovin/pen/NWaKzwz – aleks korovin Nov 28 '21 at 17:39
@alekskorovin Sorry, I meant to write hovering on green results in change of blue, but not of green. – AlwaysLearning Nov 28 '21 at 20:03
Sure, I guess that the case: https://codepen.io/alekskorovin/pen/KKXPJeb ? – aleks korovin Nov 29 '21 at 05:12
@alekskorovin Nice! But I don't understand how it works. Could you please use that code in your reply and provide some explanation? – AlwaysLearning Nov 29 '21 at 07:36
@AlwaysLearning I've added some comments here - https://codepen.io/alekskorovin/pen/KKXPJeb please let me know if something not clear – aleks korovin Dec 01 '21 at 14:01
@alekskorovin It look me a long time to understand this, so I am writing here an explanation for any future readers (and reminder for myself). Please let me know if it is correct. 1. The last rule says that, if `.parent` (so, neither `.one` nor `.two`) is not hovered, the whitish overlay is transparent. Note that `--bg` of `.parent` is inherited by `.one` and `.two`. 2. Now suppose `.one` is hovered. The last rule does not apply. `--bg` defined in the first rule (`:root`) kicks in. However, the rule for `.common:hover:before` overrides `bg` only for `.one`, so that the latter has no overlay. – AlwaysLearning Dec 02 '21 at 08:17
@alekskorovin And there is one more subtlety. If one uses `.common` instead of `.parent` in the last rule, the rule will apply to the non-hovered element even if the other is hovered, so due to the cascading nature of CSS it will override the rule for `.common:hover:before`. This is why a common parent is really needed for this to work. – AlwaysLearning Dec 02 '21 at 08:35
@AlwaysLearning - 1. The last rule says: If inside of the `.parent` there are no any `div` elements which are hovered - the whitish overlay is transparent, in other case, that rule doesn't applicable and default whitish overlay will be used because of `--bg` will be taken from `:root` – aleks korovin Dec 02 '21 at 09:04
@AlwaysLearning your explanation is good, thanks! – aleks korovin Dec 02 '21 at 09:14
@alekskorovin 1. The two are equivalent, aren't they? If parent is hovered, all it's children are hovered as well. A parent is not hovered only when none of the children is hovered. – AlwaysLearning Dec 02 '21 at 09:41

Changing an unrelated div on hover

1 Answers1