保持鋰的懸停狀態。當鼠標懸停在另一個元素

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>