jQuery问题的鼠标悬停效果

Question

假设我有4个imagediv（imgdiv1，imgdiv2，imgdiv3，imgdiv4）和4个contentdiv（condiv1，condiv2，condiv3，condiv4）和1个主要内容div（maincon），所有contentdiv（主要内容div除外）都需要保持“隐藏”或不可见。 当我在imagediv上进行鼠标悬停时，每个con都会显示淡入效果。 所有contentdiv位于同一位置，而imagediv是一种菜单。

例如：如果我将鼠标移到imgdiv1上，condiv1将出现，并具有平滑的淡入效果。 当我的鼠标移出imgdiv1时，condiv1应该淡出并具有淡入淡出效果，imgdiv2，imgdiv3和imgdiv4也是如此。 maincon div始终会存在，并且在imagediv上使用Mousover触发时，condiv应该只越过maincon。

如何使用jQuery实现此目的？ 什么是最好的方法？

Answer 1

你有没有看着悬停 ？ 它结合了mouse in / mouse out事件处理程序，从而最大程度地减少了您需要编写的代码。

Answer 2

您可以使用悬停功能
$('#imgdiv1').hover(function(){ /*fade in code*/},function(){/*fade out code*/});

或者，您可以查看JqueryUI并使用Tabs小部件。

Answer 3

您可以使用hover（）在两个函数之间切换，一个在mouseenter上，另一个在鼠标上离开imgdiv。 为了实用，请为您的imgdiv附加一个类：“ imgdiv”。 这样，您就可以一次创建行为，并通过each（）将其附加到所有imgdiv元素； 环。

另外，为所有contentdiv元素提供一个“ contentdiv”类，以便您可以通过一次调用将其隐藏。

$(document).ready(function(){
   // hide all that should be hidden
   $('div.contentdiv').hide();
    var divToShow= '';
    var strlength = 10;
    $('div.imgdiv').each(function(){
            $(this).hover(function(){
                //find which contentdiv to show
                var thisId= $(this).attr('id');
                strlength = thisId.length;
                divToShow = 'condiv'+thisId.charAt(strlength-1);
                $(divtoShow).stop().fadeIn('slow');
                }
               ,
                function(){
                 // when mouse leaves imgdiv...
                 $(divtoShow).stop().fadeOut('slow');
               }
            );
      });

});