Javascript jQuery问题的鼠标悬停效应

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

示例：如果我将鼠标放在imgdiv1上，condiv1将以平滑淡入效果出现。当我的鼠标离开imgdiv1时，condiv1应该淡出到不可见状态，并具有淡出效果，imgdiv2、imgdiv3和imgdiv4也是如此。maincon div将始终在那里，当ImageDiv上的鼠标悬停触发时，condiv应刚好越过maincon

如何使用jQuery实现这一点？

---

最好的方法是什么？

你看过吗？它结合了鼠标入/鼠标出事件处理程序，最大限度地减少了您需要编写的代码。

您可以使用悬停功能

$（'imgdiv1'）。悬停（函数（）{/*淡入代码*/}，函数（）{/*淡出代码*/}）

或者，您可以查看JqueryUI并使用Tabs小部件。
您可以使用hover（）在两个函数之间切换，一个在mouseenter上，另一个在mouse离开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');
               }
            );
      });

});

我不是jQuery的专家，我正在寻找一些关于如何实现这一点的指导，你认为哪一个是最好的？老实说，我从来没有使用过Tabs小部件，我只在jquery.com上玩过演示，它似乎很有用，但我可以告诉你，悬停函数使用非常简单，可以随时添加到元素中。非常简单，请查看规范