在當前div之外的另一個div內選擇一個div：懸停

當滑鼠懸停在 .project1 元素（位于 .left-container div 內）時，我試圖顯示 .right-text1 元素（位于 .right-container div 內）。但是，我無法使用 CSS 對其進行編碼，因為選擇器僅在當前父 div 內作業。

我有以下代碼：

.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>

必須保持格式，其中兩個容器彼此相鄰并保留 25% 和 74% 的寬度。

這可能非常簡單，但我現在學習 CSS 已經一周了，這讓我很困惑。

任何幫助將不勝感激。

uj5u.com熱心網友回復：

正如評論中所解釋的，為此您需要 JS。

這是一個示例，它在滑鼠進入時添加一個類，并在滑鼠離開時將其洗掉，模仿懸停效果。

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>

標籤：javascript html css

上一篇：嵌套子元素中的粘性元素

下一篇：選單串列：部分專案不顯示