使用ID分隔课程

我有两幅DIV在悬停时显示的图片，显示一些用户信息。它的外观如预期的那样，但我不知道如何只显示悬停图像上的信息。使用ID分隔课程

我该怎么做？

下面的代码的带电作业例如： http://jsfiddle.net/uvHw4/

原始的javascript代码：

$(document).ready(function() { 
    $('.start_profile_container_text').hide(); 
    $('.start_profile_container').mouseenter(function() { 
     $('.start_profile_container_text').show('slide', { direction: "down"} ,'fast'); 
    }); 

    $('.start_profile_container').mouseout(function() { 
     $('.start_profile_container_text').hide('slide', { direction: "down"} ,'fast'); 
    }); 

});

来源

2013-01-16 Patrick Reck

脚本改成这样：

$(document).ready(function() { 
    $('.start_profile_container_text').hide(); 

    $('.start_profile_container').mouseenter(function() { 
    $('.start_profile_container_text', this).show('slide', { 
     direction: "down" 
    }, 'fast'); 
    }); 

    $('.start_profile_container').mouseout(function() { 
    $('.start_profile_container_text', this).hide('slide', { 
     direction: "down" 
    }, 'fast'); 
    }); 

});

你的代码的差异简单地增加这显示/隐藏功能涉及到实际的元素。

来源

2013-01-16 13:02:38

通行证当前对象的背景下，解决那么，元件的后裔。

Live demo

$('.start_profile_container').mouseenter(function() { 
    $('.start_profile_container_text', this).show('slide', { 
     direction: "down" 
    }, 'fast'); 
    });

来源

2013-01-16 13:01:00 Adil

$(document).ready(function() { 
    $('.start_profile_container_text').hide(); 

    $('.start_profile_container').mouseenter(function() { 
    $('.start_profile_container_text', this).show('slide', { 
     direction: "down" 
    }, 'fast'); 
    }); 

    $('.start_profile_container').mouseleave(function() { 
    $('.start_profile_container_text', this).hide('slide', { 
     direction: "down" 
    }, 'fast'); 
    }); 

});

使用上下文找到.start_profile_container_text里面只有徘徊格：$('.start_profile_container_text', this)其中，这是指向当前的div元素。

另外，看我把它换成mouseout与mouseleave应该比mouseout更好地工作（文本将不会跳起来。区别是，如果鼠标进入一个子元素mouseout甚至会发生，mouseleave不会发生，如果你从一个元素移动到其子）

演示：http://jsfiddle.net/uvHw4/1/

来源

2013-01-16 13:01:53

尝试使用儿童（）DEMO：http://jsfiddle.net/gDZey/

$(this).children('.start_profile_container_text').show('slide', { 
    direction: "down" 
}, 'fast');

我会建议在这种情况下使用http://api.jquery.com/hover/。

来源

2013-01-16 13:02:35 Michael

$(document).ready(function() { 
    $('.start_profile_container_text').hide(); 

    $('.start_profile_container').hover(function() { 
    $(this).find('.start_profile_container_text').show('slide', { 
     direction: "down" 
    }, 'fast'); 
    }, 

    function() { 
    $(this).find('.start_profile_container_text').hide('slide', { 
     direction: "down" 
    }, 'fast'); 
    }); 

});

此代码正常工作。我建议使用hover而不是mouseenter和mouseout。

这里是演示http://jsfiddle.net/uvHw4/3/

来源

2013-01-16 13:04:10 pktangyue

u可以使用hover()，而不是两个功能..

$('.start_profile_container').hover(
    function() { 
     $('.' + this.className +'_text', this).show('slide', { direction: "down"}, 'fast'); 
    }, 
    function() { 
     $('.' + this.className +'_text', this).hide('slide', {direction: "down"}, 'fast'); 
    } 
);

来源

2013-01-16 13:06:26 bipen

使用ID分隔课程

回答

相关问题