jquery - jQuery在父元素悬停时触发子元素

Question

我有一个包含嵌套 div 的列表，其中包含两个绝对堆叠在一起的图像。我已经建立了一个悬停效果，可以创建平滑的过渡效果。但是，该效果仅在鼠标悬停在图像上时触发，而在鼠标悬停在链接上方时不会触发。这是我的简短想法的代码：

<ul id="shortcuts" class="sitewidth">
    <li>
        <a href="#">
            <div class="shortcuticon box">
                <img src="images/icon-learn.png" alt="" class="a">
                <img src="images/icon-learn-hover.png" alt="" class="b">
            </div>
        </a>
    </li>
    <li>
        <a href="#">
            <div class="shortcuticon box">
                <img src="images/icon-learn.png" alt="" class="a">
                <img src="images/icon-learn-hover.png" alt="" class="b">
            </div>
        </a>
    </li>
    <li>
        <a href="#">
            <div class="shortcuticon box">
                <img src="images/icon-learn.png" alt="" class="a">
                <img src="images/icon-learn-hover.png" alt="" class="b">
            </div>
            <h2>Hello World!</h2>
        </a>
    </li>

    <script type='text/javascript'>
        $(document).ready(function(){
            $("img.a").hover(function() {
                $(this).stop().animate({"opacity": "0"}, "slow");
            }, function() {
                $(this).stop().animate({"opacity": "1"}, "slow");
            });
        });
    </script>
</ul>

我确实意识到应该在#shortcuts li a而不是图像本身上完成 hove 功能。但是这段代码是有效的，它会让你大致了解我在寻找什么。非常感谢您的帮助。

Answer 1

试试这个：- 不知道你到底想怎么出现，但这是我的尝试。

只有一张图片*

http://jsfiddle.net/tQwDk/

两个图像

http://jsfiddle.net/GcJG5/

 $("#shortcuts li").hover(

function () {
    $('img.a', this).stop().animate({
        "opacity": "0"
    }, "slow");
},

function () {
    $('img.a', this).stop().animate({
        "opacity": "1"
    }, "slow");
});

Answer 2

我的第一个想法是在图像事件中添加一个悬停事件Hello World h2并调用：triggerhover

$("#shortcuts li a h2").hover(function(){
  $(this).parent.find('img.a').trigger('hover');
});

不幸的是，不可能trigger像hover.

幸运的是，我相信以下内容将为您提供所需的结果。您可以在父链接上使用mouseenter和mouseleave，然后找到子图像并为其设置动画。

$(document).ready(function(){
    $("#shortcuts li a").mouseenter(
        function() {
            $(this).find('img.a').stop().animate({"opacity": "0"}, "slow");
     }).mouseleave(
        function() {
            $(this).find('img.a').stop().animate({"opacity": "1"}, "slow");
    });

});

Answer 3

尝试

$(document).ready(function() {
    $("a").has('img.a').hover(function() {
            $('img.a', this).stop().animate({
                        "opacity" : "0"
                    }, "slow");
        }, function() {
            $('img.a', this).stop().animate({
                        "opacity" : "1"
                    }, "slow");
        });
});