淡入/淡出画布框的悬停

Hello and sorry for asking simple things! I am a jQuery noob and even tough I researched a lot I did not manage to make this simple effect work.

您好,对不起要求简单的事情!我是一个jQuery noob,甚至很难我研究了很多,我没有设法使这个简单的效果工作。

I want child to be faded in on parent hover and fade out on mouseout.

我希望孩子在父母悬停时消失,在mouseout上淡出。

My other problem is that all the divs have the same class and if I show/hide childrens on hover the effect applies for all the other divs as well and that is really bad... I need a way to make jquery understand wich element is hovered even tough all of them have the same class.

我的另一个问题是所有的div都有相同的类,如果我在悬停时显示/隐藏子项,那么效果也适用于所有其他div,这真的很糟糕...我需要一种方法让jquery理解这个元素是徘徊甚至强硬他们都有同一个班级。

I am not sure how well I explained this but I made a quick jsFiddle: http://jsfiddle.net/6nBBZ/

我不确定我是如何解释这个但我做了一个快速的jsFiddle:http://jsfiddle.net/6nBBZ/

and here is my jquery:

这是我的jquery:

$(".container").mouseover(function() {
$("a").fadeIn("slow");
});
$(".container").mouseout(function() {
$("a").fadeOut();
});

Thanks!

3 个解决方案

#1

You need to study jQuery's DOM traversal methods, these will help you in this kind of situations where you need to find elements relative to other elments, in your case you want to use find() to select descendants of the hovered element.

您需要学习jQuery的DOM遍历方法,这些将帮助您在需要查找相对于其他元素的元素的情况下,在您的情况下,您希望使用find()来选择hovered元素的后代。

Also, instead of mouseover you should use mouseenter to handle the hover event so the code only runs once when the mouse enters the element, personally I prefer to use hover() with two function arguments to handle mouseenter and mouseleave respectively:

另外,你应该使用mouseenter来处理悬停事件,所以代码只在鼠标进入元素时运行一次,我个人更喜欢使用带有两个函数参数的hover()来分别处理mouseenter和mouseleave:

$(".container").hover(function() {
    $(this).find("a").stop().fadeIn("slow");
},function(){
    $(this).find("a").stop().fadeOut();
});

Updated fiddle

Also note that you need to remove your CSS rule and let jQuery handle the display of the elements

另请注意,您需要删除CSS规则并让jQuery处理元素的显示

#2

$(".container").mouseenter(function() {
    $(this).find('.hover').fadeIn(500);
}).mouseleave(function() {
    $(this).find('.hover').fadeOut(500);
});

http://jsfiddle.net/Aveendra/LyjB9/2/

#3

First of all i just don't think it's a good way to solve problem. Having different divs for each picture. Thankfully you told, what you wanted to do. So i can see why you were creating different container divs for each photo. To make jquery work.

首先,我不认为这是解决问题的好方法。每张图片都有不同的div。谢天谢地,你说,你想做什么。所以我可以看到你为每张照片创建不同的容器div的原因。使jquery工作。

I have done it without using many divs. And simple jquery.

我没有使用很多div就完成了。而简单的jquery。

Preview :http://jsfiddle.net/techsin/jkhz5/4/embedded/result/ UPDATED

预览:http://jsfiddle.net/techsin/jkhz5/4/embedded/result/更新

this is the whole code:::::

这是整个代码:::::

$("#main div").each(function(){
    var $this = $(this),x=.2;
    $this.css({opacity:x});
    $this.hover(function(){$this.stop().animate({opacity: 1});},
                function(){$this.stop().animate({opacity: x});});
});

Code Here :http://jsfiddle.net/techsin/jkhz5/4/ UPDATED

代码在这里:http://jsfiddle.net/techsin/jkhz5/4/更新

#1