jQuery hover show div toggle

我正在这个非常简单的网站上工作但是我已经有一段时间了，因为我摆弄了jQuery，我想我在这里做错了。

在这里你可以用jsFiddle预览这个想法http://jsfiddle.net/rGb34/1/

jQuery存在一些问题。

1. 如果将鼠标hover在黄色按钮上，黄色内容将开始翻转。
2. 如果你将鼠标hover在一个按钮上然后退出它，则div会消失（由于切换function）但我希望最后一个div处于活动状态，即使没有hover。

有没有人对我有好的建议，所以我可以完成这个？

Answer 1

首先：不要将同一个id名称与另一个标签一起使用。 在你的例子中，它是id =“slider”。

这是jsFiddle玩（我已经编辑了你的HTML和CSS）

你可以用这种方式做到这一点，更加坚实：

jQuery的：

 jQuery(document).ready(function() { $('.greenC, .blueC, .orangeC').hide(); $('.nav li').hover(function() { var takeClass = $(this).attr('class'); // takes class hovered element. example: '.yellow' $('.slider').hide(); $('.'+ takeClass + 'C').show();// shows the element '.yellowC' }); });​ 

你的HTML应该是这样的：

 
...
 
...
 
...
 
...
 
 
 
Fiducairy services
 
Licensing
 
Payment processing
 
E-zone colocation
 
 
​ 

Answer 2

$（’。green，.blue，.orange，.yellow’）。hide（）; 如果你也隐藏黄色，它对我来说很好..这就是你想要的吗？

Answer 3

如果您希望第一个div在加载时正确显示，则必须更加具体地使用.yellow事件处理程序

 $('.y_active, .yellow').hover( function() { $('.yellow').show(); $('.green').hide(); $('.blue').hide(); $('.orange').hide(); }, function() { $('.yellow').hide(); }); 

DEMO