jQuery hover show div toggle

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

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

jQuery存在一些问题。

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

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

首先:不要将同一个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应该是这样的:

 
...
...
...
...

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

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

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

DEMO