有多种方法可以实现你想要的。其中一个（我想说的最简单/最直接）就是使用javascript和 index 锿。
所以如果你继续 1st 列表项 1st 文本项应该是可见的。等等
检查下面的代码。我正在使用数组和eventlisteners
仅供参考。使用时 li 元素，将它们 Package 在 ul 要素

const listItems = document.querySelectorAll('ul li')
// turn nodeList returned by querySelectorAll into array using spread operator
// we will need array to get the index of the hovered element.
const arrListItems = [...listItems]
const list = document.querySelector('ul')
const textItems = document.querySelectorAll('.text div')
// add mouseover event listener
list.addEventListener('mouseover', (event) => handleHover(event))
const handleHover = (event) => {
// get index of the hovered element
  const index = arrListItems.indexOf(event.target)
  // remove class show-me from all items
  textItems.forEach(item => item.classList.remove('show-me'))
  // check if there is a textItem with the specific index
  // add ' show-me ' className to the item with the same index as the hovered list item
  textItems[index] &&
    textItems[index].classList.add("show-me");
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

ul {
  margin: 0 15px;
  padding: 0;
}

.text div {
  visibility: hidden;
}

.text div.show-me {
  visibility: visible;
}

<div class="wrapper">
  <ul>
    <li> Test 1 </li>
    <li> Test 2 </li>
    <li> Test 3 </li>
    <li> Test 4 </li>
  </ul>
  <div class="text">
    <div> Your Content 1</div>
    <div> Your Content 2</div>
    <div> Your Content 3</div>
    <div> Your Content 4</div>
    <div> Your Content </div>
    <div> Your Content </div>
  </div>
</div>