Question

我正在使用一些CSS来获得一个小菜单的想法。

我希望在准备好之后，我可以将鼠标悬停在“测试1”链接上，并在 #content div中显示测试1内容。如果您将鼠标悬停在“测试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>

Answer 1

<!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>

**更新** 这是什么意思？

Answer 2

你需要对你的标记和jquery进行一些更改（如果你这样做的话，还是普通的js）让它工作。

<head>
<script>
$("#menuItems li").mouseover(function(){
        var className = $(this).attr("class");
        $("#content div").hide();
        $("#content").find("."+className).show();
});
</script>
</head>

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

只要您遵循标记符号

，这将适用于n个菜单元素

维护列表项状态：悬停

2 个答案: