gpt4 book ai didi

html - 维护 :hover 上的列表项状态

转载 作者:太空宇宙 更新时间:2023-11-04 05:09:38 26 4
gpt4 key购买 nike

我正在使用一些 CSS 来实现我的一个小菜单创意。

我希望在准备就绪后,我可以将鼠标悬停在“测试 1”链接上,测试 1 的内容会显示在 #content div 中。如果您将鼠标悬停在“测试 2”链接上,则会显示测试 2 内容。

我还希望,当我将光标移到 #content div(来自链接)时,是否有可能它会在该区域保留该链接的内容。

这可能吗?

非常感谢对此的任何帮助。

这是我的基本 HTML: http://jsfiddle.net/PjHnM/1/


更新

我在这里找到了一个例子: http://jsfiddle.net/88nKd/但是当我将鼠标悬停在内容部分时,我仍然不确定如何保持状态。


<!DOCTYPE html>
<html><head><meta charset="utf-8" />
<title>Divs</title>
<style type="text/css">
* {margin:0;padding:0}
#main {height:100px;width:400px;float:left;background:#eee;}
#main ul {height:100px;float:left;background:#999}
#main ul li a {width:100px;display:block;background:#333;color:#fff}
#main ul li a:hover {background:#777}
#content {height:100px;}
#content div {float:left}
</style>
</head>
<body>

<div id="main">
<ul>
<li><a href="">Test 1</a></li>
<li><a href="">Test 2</a></li>
</ul>
<div id="content">
<div style="display:none">Test 1 Content</div>
<div style="display:none">Test 2 Content</div>
</div>
</div>

</body>

</html>

最佳答案

<!DOCTYPE html>
<html><head><meta charset="utf-8" />
<title>Divs</title>
<style type="text/css">
* {margin:0;padding:0}
#main {height:100px;width:400px;float:left;background:#eee;}
#main ul {height:100px;float:left;background:#999}
#main ul li a {width:100px;display:block;background:#333;color:#fff}
#main ul li a:hover {background:#777}
#content {height:100px;}
#content div {height:100px;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function(){
$("#test1").mouseenter(function(){$("#content1").show();}).mouseleave(function(){$("#content1").hide();});
$("#test2").mouseenter(function(){$("#content2").show();}).mouseleave(function(){$("#content2").hide();});

$("#content1").mouseenter(function(){$("#content1").show();}).mouseleave(function(){$("#content1").hide();});
$("#content2").mouseenter(function(){$("#content2").show();}).mouseleave(function(){$("#content2").hide();});
});
</script>
</head>
<body>

<div id="main">
<ul>
<li><a href="javascript:void;" id="test1">Test 1</a></li>
<li><a href="javascript:void;" id="test2">Test 2</a></li>
</ul>
<div id="content">
<div style="display:none" id="content1">Test 1 Content</div>
<div style="display:none" id="content2">Test 2 Content</div>
</div>
</div>

</body>

</html>

** 已更新 **这是你的意思吗?

关于html - 维护 :hover 上的列表项状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9644803/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com