2

您好，很抱歉问简单的事情！我是一个 jQuery 菜鸟，即使我研究了很多，我也没有设法使这个简单的效果起作用。

我希望孩子在父母悬停时淡入并在鼠标退出时淡出。

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

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

这是我的jQuery：

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

谢谢！

4

3 回答 3

4

您需要学习 jQuery 的DOM 遍历方法，这些将在您需要查找相对于其他元素的元素的这种情况下为您提供帮助，在您想要用来find()选择悬停元素的后代的情况下。

此外，而不是mouseover你应该使用mouseenter来处理悬停事件，因此代码只在鼠标进入元素时运行一次，我个人更喜欢使用hover()两个函数参数来分别处理mouseenter和mouseleave：

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

更新的小提琴

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

于 2013-08-26T04:38:07.570 回答
2 
$(".container").mouseenter(function() {
    $(this).find('.hover').fadeIn(500);
}).mouseleave(function() {
    $(this).find('.hover').fadeOut(500);
});

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

于 2013-08-26T04:35:41.043 回答
1

首先，我只是不认为这是解决问题的好方法。每张图片都有不同的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/ 更新

于 2013-08-26T05:21:55.547 回答