维护列表项状态：hover

我正在使用一些CSS来获取我拥有的小菜单。维护列表项状态：hover

~~我希望在准备好时，我可以通过在 ＃内容格链接“测试1”和测试1的内容显示徘徊。如果您将鼠标悬停在“测试2”链接上，则会显示测试2内容。~~

我也希望如果有可能，当我将光标移动到＃内容 DIV（从链接）将维持在该区域的该链接的内容。

这可能吗？

非常感谢任何与此有关的帮手。

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

UPDATE

我有一个例子，我在这里找到： 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>

来源

2012-03-10 michaelmcgurk

你不能以纯CSS做这项工作。你需要JS的帮助。 – Joseph 2012-03-10 07:52:12

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

** **修订是这是什么？你是什么意思？

来源

2012-03-10 07:48:09 M1K1O

谢谢。将在一秒之内尝试:-)对不起，我上面的问题已被编辑一点，因为我设法找到一个类似的部分解决方案。 – michaelmcgurk 2012-03-10 07:50:16

这是新的更新版本。我想，这是你的意思。 – M1K1O 2012-03-10 07:52:34

试过了，它效果很好。但是，我还想知道，如果我将鼠标悬停在#content框上以保留文本，这是否可能。 – michaelmcgurk 2012-03-10 07:52:58

你需要对你的标记和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个只要U请按照标记符号

来源

2012-03-10 07:53:15 redDevil

维护列表项状态：hover

回答

相关问题