JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<div class="wrapper w1">
  <div>Nur hier funktioniert es</div>
  <div>Hier nicht</div>
  <div>Hier nicht</div>
  <div>Hier nicht</div>
</div>

<p>
Ansonsten gäbe es noch diese Möglichkeit:
</p>

<div class="wrapper w2">
  <div>hier funktioniert es</div>
  <div>jedoch werden die divs</div>
  <div>auch in den Zwischen-abständen</div>
  <div>rot markiert :/</div>
</div>

<p>
Als letzte (und zu empfehlende) Variante, gäbe es da noch Javascript.
</p>

<div class="wrapper w3">
  <div>hier funktioniert es (JQuery)</div>
  <div>wie du willst</div>
  <div>Die Abstände werden</div>
  <div>ignoriert</div>
</div>

<div class="wrapper w4">
  <div>hier funktioniert es (Vanilla-Javascript)</div>
  <div>wie du willst</div>
  <div>Die Abstände werden</div>
  <div>ignoriert</div>
</div>

CSS

.wrapper {
  display: flex;
}

.wrapper > div {
  display: block;
  width: 100px;
  height: 100px;
  background: lightgrey;
  margin-right: 10px;
  margin-bottom: 10px;
}

.w1 > div:hover ~ div, .w1 > div:hover {
  background: red;
}

.w2:hover > div {
  background: red;
}

JavaScript

//Hier einmal mit JQuery (Empfehlung)
$(".w3 > div").hover(function () {
	$(".w3 > div").css("background", "red");
}).mouseout(function () {
	$(".w3 > div").css("background", "lightgrey");
});

//Hier einmal mit Vanilla-Javascript
var w4 = document.querySelectorAll(".w4 > div");

w4.forEach(function (elem) {
	elem.addEventListener("mouseover", function(elem1) {
  	w4.forEach(function (elem) {
    	elem.style.background = 'red';
  	});
  });
  
  elem.addEventListener("mouseout", function(elem1) {
  	w4.forEach(function (elem) {
    	elem.style.background = 'lightgrey';
  	});
  });
});