Select a div inside another div outside the currect div:hover

November 25, 2021

I am trying to show the .right-text1 element (which is inside .right-container div) when the mouse hovers over .project1 element (which is inside .left-container div). However, I am unable to code it with CSS since selectors work only inside the current parent div.

I have the following code:

.left-container {
  float: left;
  width: 25%;
}

.left-container li {
  list-style: none;
  padding: 10px;
  font-size: 20px;
  border: 2px solid;
  margin-top: 5px;
}

.right-container {
  width: 74%;
  float: right;
  margin-top: 16px;
  height: 200px;
}

.right-text1,
.right-text2,
.right-text3,
.right-text4 {
  border: 2px solid;
  padding: 5px;
  height: 50%;
  margin-bottom: 3px;
}


/* This is where I try to show RIGHT-TEXT1 upon hovering on PROJECT1 div,
but the selector does not work due to trying to access .right-text1 but it is outside the current DIV */

.project1:hover~.right-text1 {
  display: none;
}

<div class="left-container">
  <ul>
    <div class="project1">
      <li>Project 1</li>
    </div>
    <div class="project2">
      <li>Project 2</li>
    </div>
    <div class="project3">
      <li>Project 3</li>
    </div>
    <div class="project4">
      <li>Project 4</li>
    </div>
  </ul>
</div>

<div class="right-container">
  <div class="right-text1" style="background-color: tomato;">
    Information about Project 1
  </div>
  <div class="right-text2" style="background-color: teal;">
    Information about Project 2
  </div>
  <div class="right-text3" style="background-color: green;">
    Information about Project 3
  </div>
  <div class="right-text4" style="background-color: yellow;">
    Information about Project 4
  </div>
</div>

It is imperative to keep the format, where the two containers reside next to each other and 25% and 74% width stays.

It might be super easy, but I am learning CSS for a week now and this stumbled me.

Any help would be greatly appreciated.

>Solution :

As explaned in the comments, you’ll need JS for that.

Here a sample that adds a class on mouse enter, and remove it on mouse leave, mimicking the hover effect.

document.querySelectorAll('[data-project]').forEach(project => {

  const name = project.dataset.project
  const infoElement = document.querySelector(`[data-project-info="${name}"]`)
  
  // Mouse enter
  project.addEventListener('mouseenter', () => {
    infoElement.classList.add('is-hovered')
  })
  
  // Mouse leave
  project.addEventListener('mouseleave', () => {
    infoElement.classList.remove('is-hovered')
  })

})

.left-container {
  float: left;
  width: 25%;
}

.left-container li {
  list-style: none;
  padding: 10px;
  font-size: 20px;
  border: 2px solid;
  margin-top: 5px;
}

.right-container {
  width: 74%;
  float: right;
  margin-top: 16px;
  height: 200px;
}

.right-text1,
.right-text2,
.right-text3,
.right-text4 {
  border: 2px solid;
  padding: 5px;
  height: 50%;
  margin-bottom: 3px;
  display: none;
}

.right-text1.is-hovered,
.right-text2.is-hovered,
.right-text3.is-hovered,
.right-text4.is-hovered {
  display: block;
}

<div class="left-container">
  <ul>
    <div class="project1" data-project="1">
      <li>Project 1</li>
    </div>
    <div class="project2" data-project="2">
      <li>Project 2</li>
    </div>
    <div class="project3" data-project="3">
      <li>Project 3</li>
    </div>
    <div class="project4" data-project="this-text-matches-here">
      <li>Project 4</li>
    </div>
  </ul>
</div>

<div class="right-container">
  <div class="right-text1" style="background-color: tomato;" data-project-info="1">
    Information about Project 1
  </div>
  <div class="right-text2" style="background-color: teal;" data-project-info="2">
    Information about Project 2
  </div>
  <div class="right-text3" style="background-color: green;" data-project-info="3">
    Information about Project 3
  </div>
  <div class="right-text4" style="background-color: yellow;" data-project-info="this-text-matches-here">
    Information about Project 4
  </div>
</div>