Targeting an element backwards in DOM?

Question

I'll keep it short:

I'm kinda new to JS and CSS. So I essentially I'm trying to change the background of DIV1 whenever someone hovers on DIV2. This is what I have right now:

#DIV2:hover ~ #DIV1 {
    background-color: black;
     transition: all ease-in-out 0.5s;
}

div {
  width: 100px;
  height: 50px;
}

#DIV2 {
  background-color: red;
}

<div id="DIV1"></div>
<div id="DIV2"></div>

The issue is this works when DIV2 comes before DIV1. I want it to work when DIV 1 comes before DIV2 because that's how my site is to be structured. Now I understand that I can't really target backwards in DOM (at least that's how I understand css works.) So is there any way I can make this work? Would appreciate any response/feedback. Thanks!

javascript can do it easily with mouse events – Bravo Aug 14 '21 at 04:22 — Bravo, Aug 14 '21 at 04:22

score 2 · Answer 1 · answered Aug 14 '21 at 04:51

Here is a little CSS-only trick by using ability set order of children in flex/grid container:

.container
{
  display: grid;
}

.div1{order: 1}
.div2{order: 2}
.div3{order: 3}
.div4{order: 4}
.div5{order: 5}

.container > div
{
  border: 1px solid black;
  background-color: lightgreen;
}

.div5:hover
{
  background-color: green;
}
.div1:hover
{
  background-color: red;
}
.div5:hover ~ .div4,
.div4:hover ~ .div3,
.div3:hover ~ .div2,
.div2:hover ~ .div1
{
  background-color: pink;
}

<div class="container">
  <div class="div5">DIV5</div>
  <div class="div4">DIV4</div>
  <div class="div3">DIV3</div>
  <div class="div2">DIV2</div>
  <div class="div1">DIV1</div>
</div>

score 0 · Answer 2 · answered Aug 14 '21 at 04:37

You can just set the events with Javascript with the callback mouseover for hover and mouseout for the action when mouse not hovering.

document.querySelector('#DIV2').addEventListener('mouseover', function() {
  var d1 = document.querySelector('#DIV1');
  d1.style.backgroundColor = "black";
});

document.querySelector('#DIV2').addEventListener('mouseout', function() {
  var d1 = document.querySelector('#DIV1');
  d1.style.backgroundColor = "white";
});

div {
  text-align: center;
  width: 500px;
  height: 50px;
}

<div id="DIV1">1</div>
<div id="DIV2">2</div>

Bravo · Answer 3 · 2021-08-14T04:53:36.503

If you need to do this on multiple pairs of divs (using class of course) that do not have a common parent element - without changing your HTML

document.querySelectorAll('.DIV1').forEach(d1 => {
  const d2 = d1.parentElement.querySelector('.DIV1 ~ .DIV2');
  if (d2) {
    d2.addEventListener('mouseover', () => d1.classList.add('phover'));
    d2.addEventListener('mouseout', () => d1.classList.remove('phover'));
  }
});

.phover {
  background-color: black;
  color: white;
}

.DIV2 {
  cursor: default;
}

<div>
  <div class="DIV1">ONE</div>
  <div class="DIV2">TWO</div>
</div>
<div>
  <div class="DIV1">ONE</div>
  <div class="DIV2">TWO</div>
</div>
<div>
  <div class="DIV1">ONE</div>
  <div class="DIV2">TWO</div>
</div>
<div>

If you want to do it on multiple pairs of divs with the same parent element - without changing your HTML

document.querySelectorAll('.DIV1').forEach(d1 => {
  for (let d2 = d1.nextElementSibling; d2; d2 = d2.nextElementSibling) {
    if (d2.classList.contains('DIV2')) {
      d2.addEventListener('mouseover', () => d1.classList.add('phover'));
      d2.addEventListener('mouseout', () => d1.classList.remove('phover'));
      break;
    }
  }
});

.phover {
  background-color: black;
  color:white;
}
.DIV2 {
  cursor:default;
}

<div class="DIV1">ONE</div>
<div class="DIV2">TWO</div>
<div class="DIV1">ONE</div>
<div class="DIV2">TWO</div>
<div class="DIV1">ONE</div>
<div class="DIV2">TWO</div>

Multiple pairs of DIVS, change the HTML

document.querySelectorAll('.DIV2').forEach(d2 => {
  const d1 = document.querySelector(d2.dataset.for);
  if (d1) {
    d2.addEventListener('mouseover', () => d1.classList.add('phover'));
    d2.addEventListener('mouseout', () => d1.classList.remove('phover'));
  }
});

.phover {
  background-color: black;
  color: white;
}

.DIV2 {
  cursor: default;
}

  <div id="d1" class="DIV1">ONE</div>
  <div class="DIV2" data-for="#d1">TWO</div>
  <div id="d2" class="DIV1">ONE</div>
  <div class="DIV2" data-for="#d2">TWO</div>
  <div id="d3" class="DIV1">ONE</div>
  <div class="DIV2" data-for="#d3">TWO</div>

score 0 · Answer 4 · answered Aug 14 '21 at 05:37

For the simple case where DIV1 and DIV2 are within the same container you can set the color on hover of the container, putting back DIV1's color if DIV1 was the part that was being hovered.

Of course, if there are other elements DIV3 etc you'd have to ensure their colors were set back on hover in the same way so it's a bit of a messy solution if you have a complex set-up.

.container {
  display: inline-block;
}

#DIV1,
#DIV2 {
  width: 40vmin;
  height: 40vmin;
}

#DIV2 {
  background-color: cyan;
}

.container:hover #DIV1 {
  background-color: black;
  transition: all ease-in-out 0.5s;
}

.container #DIV1,
.container #DIV1:hover {
  background-color: magenta;
}

<div class="container">
  <div id="DIV1">DIV1</div>
  <div id="DIV2">DIV2</div>
</div>

Targeting an element backwards in DOM?

4 Answers4