悬停在另一个元素上时保持Li的悬停状态

Question

我有一个无序的链接列表，将鼠标悬停在每个列表上都对应于一组单独的链接的打开状态，如下所示：

<div class="links">
  <ul>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
    <li>Link 4</li>
  </ul>
</div>
<div class="content-area">
  <div class="stuff-changing-here">
  </div>
</div>

因此，例如，将鼠标悬停在链接1上会在此处的内容更改div中显示内容A，而链接2会显示内容B，等等。如何保持悬停状态持久。 因此，当链接1悬停时，只要内容A悬停，其悬停状态就应保持不变，链接2和内容B等保持不变。我愿意使用CSS或原始JavaScript，但也不知道会发生什么在这种情况下效果最好。 另外，如果这影响一种方法，则当任何链接都悬停时，链接的悬停状态涉及after伪类，而我发现这无法在JavaScript中进行控制。

Answer 1

这是使用JavaScript和CSS类的一种方式。

<ul>
  <li><a onmouseover="show(1);">Link 1</a></li>
  <li><a onmouseover="show(2);">Link 2</a></li>
  <li><a onmouseover="show(3);">Link 3</a></li> 
  <li><a onmouseover="show(4);">Link 4</a></li>
</ul>
<div class="content-area">
  <div id="content1" class="hideDiv">Content A</div>
  <div id="content2" class="hideDiv">Content B</div>
  <div id="content3" class="hideDiv">Content C</div>
  <div id="content4" class="hideDiv">Content D</div>
</div>
<style type='text/css'>
li { width:auto;}
  .showDiv{display:block;}
  .hideDiv{display:none;}
</style>
<script type='text/javascript'>
  var itemLength = 4;
  function show(showId){
    for (var i = 0; i < itemLength; i++)
     document.getElementById('content' + (i+1)).className = (i+1 == showId) ? 'showDiv':'hideDiv';
  }
</script>