jQuery问题的鼠标悬停效果

Question

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

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

我怎样才能使用 jQuery 实现这一点？ 最好的方法是什么？

Answer 1

您可以使用悬停功能
$('#imgdiv1').hover(function(){ /*淡入代码*/},function(){/*淡出代码*/});

或者您可以查看 JqueryUI并使用选项卡小部件。

Answer 2

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

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');
               }
            );
      });

});