保持锂的悬停状态。当鼠标悬停在另一个元素
问题描述:
我有一个链接的无序列表,并悬停在每个对应于一组独立的环节,像这样打开状态:保持锂的悬停状态。当鼠标悬停在另一个元素
<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控制该链接。
答
这是一种使用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>
已经的div显示相应,但悬停不是持久的。我会先试一试,谢谢。 –
是的,我想你是要求可见的div在停止盘旋后保持可见状态?这应该为你做 – Delosdos