Question

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

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

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

我不确定我对此有多好解释但是我做了一个快速的jsFiddle： http://jsfiddle.net/6nBBZ/

这是我的jquery：

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

谢谢！

Answer 1

你需要学习jQuery的DOM traversal methods，这些将帮助你在这种情况下你需要找到相对于其他元素的元素，在你的情况下你想用find()来选择后代悬停的元素。

此外，您应该使用mouseover代替mouseenter处理悬停事件，以便代码仅在鼠标进入元素时运行一次，我个人更喜欢使用hover()和两个分别处理mouseenter和mouseleave的函数参数：

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

<强> Updated fiddle

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

Answer 2

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

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

Answer 3

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

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

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

这是整个代码:::::

$("#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});});
});

此处代码： http://jsfiddle.net/techsin/jkhz5/4/ 更新

淡入/淡出悬停图库框

3 个答案: