jQuery的鼠标悬停效果问题

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

例如：如果我将鼠标放在imgdiv1上，condiv1将显示平滑淡入效果。当我的鼠标离开imgdiv1时，condiv1应该淡入淡出效果，imgdiv2，imgdiv3和imgdiv4也一样。 maincon div将一直存在，并且condivs应该通过imagedivs上的mousover触发maincon。

我该如何使用jQuery实现这一点？什么是最好的方法？

来源

2009-12-14 Bruno

我不是一个与jQuery亲，我正在寻找一些指导如何实现这 – Bruno 2009-12-14 20:24:50

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

或者你可以看看jQueryUI的，并使用标签控件。

来源

2009-12-14 20:27:36 RHicke

哪一个是你认为最好的？ – Bruno 2009-12-14 20:32:38

老实说，我从来没有使用Tabs小部件，我只用jquery.com上的演示玩过，它似乎很有用，但我可以告诉你，悬停功能使用非常简单，可以随时添加到元素中简单的只是检查规格http://docs.jquery.com/Events/hover#overout – RHicke 2009-12-14 23:10:04

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

来源

2009-12-14 20:25:25

您可以使用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'); 
       } 
      ); 
     }); 

});

来源

2009-12-14 20:30:21 pixeline

jQuery的鼠标悬停效果问题

回答

相关问题