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上会显示更改内容的内容A，而链接2会显示内容B等。当鼠标悬停在内容区域上时，链接的悬停状态会消失。 ; d想知道如何保持悬停状态持久。因此，当链接1悬停时，其悬停状态应该在内容A悬停的任何时候持续存在，对于链接2和内容B等也是如此。我可以使用CSS或vanilla JavaScript，但也可以使用。知道在这种情况下哪种方法最有效。此外，如果这会影响一种方法，当任何链接悬停时，链接的悬停状态涉及一个伪后类，我发现这不能用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>

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

1 个答案: