1

I want that when you hover over div1 to make div1 and div2 change background color and when you hover the div2 div1 will be affected also. And for both to have the same transition-duration.

same thing when you hover over div3 div4 and div3 should change background color and so on .

<div>
 <div class="div1"></div>
 <div class="div2"></div>
 <div class="div3"></div>
 <div class="div4"></div>
 <div class="div5"></div>
 <div class="div6"></div>
</div> ```
navigation-bar
  • 13
  • 4
  • 1
    `:hover` + `div`? – tacoshy Feb 21 '22 at 18:25
  • *and when you hover the div2 div1 will be affected also* **This is not possible in CSS alone** given your HTML structure. – connexo Feb 21 '22 at 18:45
  • Thanks for the quick reply. Is it possible to change the html structure to make this possible? – navigation-bar Feb 21 '22 at 18:51
  • You could create wrapper divs around the hover-groups, and then go `.hover-group:hover > div { what: ever; }`. Selectors level 4 will allow something like `div:has(.div2:hover) .div1 { what: ever; }`. – connexo Feb 21 '22 at 18:53
  • This question is not related to the linked question. I was writing the correct answer but I suddenly I saw the question is closed. Please reopen it. This is all about siblings not about the parent. – pouria Feb 21 '22 at 19:06

3 Answers3

2

just use the :hover selector to select the elemnt on hover. YOu can use the + selector to select the enxt siblign aswell:

div > div:hover,
div > div:hover + div {
  background-color: red;
}

div > div {
  height: 50px;
  border: 1px solid blue;
}
<div>
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  <div class="div4"></div>
  <div class="div5"></div>
  <div class="div6"></div>
</div>
tacoshy
  • 10,642
  • 5
  • 17
  • 34
  • This is what I had I forgot to add that I want the same change that happens when you hover div1 to to happen to when you hover div 2 and so on . – navigation-bar Feb 21 '22 at 18:45
  • @tacoshy I believe this doesn't answer the question. Please check my answer below. – pouria Feb 23 '22 at 12:28
  • @pouria this answer has given before the OP editted the question. With the edit, the scope of the question changed. – tacoshy Feb 23 '22 at 14:42
0

Maybe I'm interpreting what you're looking for incorrectly, but this might help:

.wrap {
  display: flex;
}

.wrap div {
  width: 100px;
  height: 100px;
  background: red;
  border: 1px solid black;
  margin: 5px;
}

.div1:hover, .div1:hover + div, .div3:hover, .div3:hover + div, .div5:hover, .div5:hover + div{
  background: blue;
}
<div class="wrap">
 <div class="div1"></div>
 <div class="div2"></div>
 <div class="div3"></div>
 <div class="div4"></div>
 <div class="div5"></div>
 <div class="div6"></div>
</div>
Rob Moll
  • 3,345
  • 2
  • 9
  • 15
  • This is what I had I forgot to add that I want the same change that happens when you hover div1 to to happen to when you hover div 2 and so on . – navigation-bar Feb 21 '22 at 18:45
0

It seems that you want to group the divs by 2. It is not possible to do it with pure CSS. You can write this:

.item {
  width: 20px;
  height: 20px;
  border: solid;
}

.item:nth-child(odd):hover, .item:nth-child(odd):hover + div {
  background-color: blue;
}
<div>
 <div class="item div1"></div>
 <div class="item div2"></div>
 <div class="item div3"></div>
 <div class="item div4"></div>
 <div class="item div5"></div>
 <div class="item div6"></div>
</div>

Here, every odd div changes its own color and the color of the div right after that, using "+" which is the "Adjacent sibling selector". Unfortunately, this operator only selects the next sibling and CSS has no solution for selecting the previous sibling.

If you insist on grouping them by two, you can either use Javascript:

const items = document.querySelectorAll('.item');

items.forEach((item, i) => {
  item.addEventListener('mouseover', function() {
  
  const siblingPosition = i % 2 === 0 ? 'nextElementSibling' : 'previousElementSibling';
  
    item.classList.add('active');
    item[siblingPosition].classList?.add('active');
  })
  
  item.addEventListener('mouseout', function() {
    items.forEach(it => it.classList.remove('active'))
  });
});
.item {
  width: 40px;
  height: 40px;
  border: solid;
}

.active {
  background-color: blue;
}
<div>
 <div class="item div1"></div>
 <div class="item div2"></div>
 <div class="item div3"></div>
 <div class="item div4"></div>
 <div class="item div5"></div>
 <div class="item div6"></div>
</div>

Or actually, group them in HTML level which in my opinion is a better solution.

pouria
  • 949
  • 8
  • 21