0

I have two different boxes when want to be able to change the properties of one box as I hover somewhere else.

I figured that if I have both boxes in the same container it works as you can see on my snippet here. Here my html and css:

.first {
  color: blue;
  background: black;
  width: 299px;
}
.first:hover + .second {
  background: red;
  color: white;
}
.second {
  color: red;
  background: black;
  width: 300px;
  margin-left: 10px;
}
.container {
  display: flex;
}
<div class="container">
  <div class="first">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam delectus quo corporis, n
  </div>
  <div class="second">
    Lorem ipsum dolor sit amet, consectetur adipisicing e et magnam rem, doloribus libero quas numquam esse in culpa!
  </div>
</div>

But how can I do the same thing if the boxes are not in the same container?

Thanks in advance.

Carsten Løvbo Andersen
  • 26,637
  • 10
  • 47
  • 77
Sidney Sousa
  • 3,378
  • 11
  • 48
  • 99

2 Answers2

0

If you use display: inline-block you can remove the use of the container but because you are using display: flex on the container class you won't have the advantage of the child items (the first and second divs) stretching to fill the height of the container. You could use a fixed height to keep them at an equal height.

.first{
  color: blue;
  background: black;
  width: 299px;

  display: inline-block;
}
.first:hover + .second {
  background: red;
  color: white;
}
.second{
  color: red;
  display: inline-block;
  background: black;
  width: 300px;
  margin-left: 10px;
}
<div class="first">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam delectus quo corporis, n
  </div>
  <div class="second">
  Lorem ipsum dolor sit amet, consectetur adipisicing e et magnam rem, doloribus libero quas numquam esse in culpa!
  </div>
hurrahfox
  • 101
  • 1
  • 4
0

(post edited)

Use Jquery : Create a new class with a background color, it will be added with Jquery and removed when your mouse left the div.

Code : (don't forget to add jquery)

$('div.one').hover(function(){
     $('div.two').toggleClass('three');
});

Check this : https://jsfiddle.net/wnszbhj3/1/