0

我正在使用这个 jquery 在另一个 div 上显示一个 div 当它悬停在它上面时，但是由于某种原因，即使它似乎可以工作，fadeIN 和 fadeOUT 也不起作用。

如果我将fadeTo 分别更改为fadeIn和 ，fadeOut那么它会破坏它，因为您将鼠标悬停在上一个不会消失？

$(function() {
$(".report-hover").hover(
    function() {
        $(this).children("img").fadeTo(200, 0.85).end().children(".report-image-hover").show();
    },
    function() {
        $(this).children("img").fadeTo(200, 1).end().children(".report-image-hover").hide();
    });
});

标记：

<div class="report-hover">

                <div class="report-image-hover">
                <a href="#">
                <img src="<?php bloginfo('template_url'); ?>/images/.....png" alt="Report" />
                </a>
                </div>

                <img src="<?php bloginfo('template_url'); ?>/images/.....png" alt="Report" />
</div>
4

2 回答 2

0

您需要在选择要淡出的图像时使用.find()，而不是。只会选择直接后代，并且您的图像仍嵌套在. 请参阅文档：.children().children()div

.children() 方法与 .find() 的不同之处在于 .children() 仅沿 DOM 树向下移动一个级别，而 .find() 也可以向下遍历多个级别以选择后代元素（孙子等）。

对于您的代码变成：

$(".report-hover").hover(
    function() {
        $(this).find("img").fadeTo(200, 0.85).end().children(".report-image-hover").show();
    },
    function() {
        $(this).find("img").fadeTo(200, 1).end().children(".report-image-hover").hide();
});
于 2012-10-08T10:05:30.333 回答
0

检查这个：JSfiddle

如果您只是将 FadeTo 替换为 FadeIn，那么它将不起作用，因为 FadeIn 具有不同的参数。JQuery 淡入

于 2012-10-08T09:57:19.780 回答