保持锂的悬停状态。当鼠标悬停在另一个元素

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上显示stuff-changing-here div中的内容A，而链接2显示内容B等等。当鼠标悬停在内容区域上时，链接的悬停状态消失，并且我想知道如何保留悬停状态持续。因此，当链接1悬停时，其悬停状态应该在任何时候持续存在，而链接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>