Question

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

示例：如果我将鼠标移到imgdiv1上，condiv1将显示效果平滑淡出。当我的鼠标离开imgdiv1时，condiv1应该淡出到fisout效果的隐身，imgdiv2，imgdiv3和imgdiv4也是如此。 maincon div将永远存在，并且当在imagedivs上使用mousover触发时，condivs应该遍历maincon。

如何使用jQuery实现这一目标？什么是最好的方式？

Answer 1

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

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

});

使用jQuery问题进行鼠标悬停效果

3 个答案: