0

我目前正在使用代码将图像的 mouseenter 上的不透明度设置为 1，然后在 mouseleave 上再次设置为 0。它不是显示一个图像，而是在悬停时显示所有图像。

我试过使用(this)而不是，(.project-hover img)所以它只影响那个特定的 div，但我需要定位(.project-hover img)而不是.span4启动函数的目标。

我将如何实现这一目标？

$(document).ready(function() {
    $(".span4").on("mouseenter", function() {
        $('.project-hover img').stop();//halts previous animation if it's running
        $('.project-hover img').animate({
            opacity: 1
        });
    }).on("mouseleave", function() {
        $('.project-hover img').stop();
        $('.project-hover img').animate({
            opacity: 0
        });
    });
});

HTML

<div class="span4">
    <div class="wrap-title">
        <div class="position">
            <div class="title"><a href="<?php echo get_permalink(); ?>"><?php the_title();?></a></div>
            <div class="tags"><?php echo $cats; ?> </div>
        </div>
    </div>  
    <div class="project-hover"><img src="<?php echo catch_that_image(); ?>">    </div>
</div>
4

4 回答 4

3

使用find()见文档... http://api.jquery.com/find/

$(document).ready(function() {
    $(".span4").on("mouseenter", function() {
        $(this).find('.project-hover img').stop();//halts previous animation if it's running
        $(this).find('.project-hover img').animate({
            opacity: 1
        });
    }).on("mouseleave", function() {
        $(this).find('.project-hover img').stop();
        $(this).find('.project-hover img').animate({
           opacity: 0
        });
    });
});

更新：

您还应该链接您的方法以提高效率，并且您可能希望传递true, true给您的.stop()方法。（以防止队列错误）

 $(document).ready(function() {
        $(".span4").on("mouseenter", function() {
            $(this).find('.project-hover img').stop(true, true).animate({
                opacity: 1
            });
        }).on("mouseleave", function() {
            $(this).find('.project-hover img').stop(true, true).animate({
               opacity: 0
            });
        });
    });
于 2013-04-22T10:52:58.953 回答
0 
$(".span4").on("mouseenter", function() {
        $('.project-hover img', $(this)).stop();//halts previous animation if it's running
        $('.project-hover img', $(this)).animate({
            opacity: 1
        });
    }).on("mouseleave", function() {
        $('.project-hover img', $(this)).stop();
        $('.project-hover img', $(this)).animate({
           opacity: 0
        });
    });
于 2013-04-22T10:52:48.633 回答
0

this指的.span4是用户悬停的当前元素，所以你所要做的就是在其中找到目标元素：

$(this).find('.project-hover img').animate(...);

从文档中：

当 jQuery 调用处理程序时，this关键字是对传递事件的元素的引用；对于直接绑定的事件，这是附加事件的元素，对于委托事件this，这是匹配的元素selector。（请注意，这可能不等于event.target事件从后代元素冒泡。）要从元素创建 jQuery 对象以便它可以与 jQuery 方法一起使用，请使用$(this).

DOM遍历方法列表： http: //api.jquery.com/category/traversing/tree-traversal/

于 2013-04-22T10:53:00.273 回答
0

我在这里找到了一个 CSS 解决方案，以防有人想要这个更简单的替代方案以供将来参考：

css：当另一个 div 悬停时显示 div

于 2013-04-22T10:59:05.250 回答