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>

我确实意识到 Hove 功能应该在 #shortcuts li a 上完成，而不是在图像本身上完成。但这段代码正在运行，并且会让您大致了解我正在寻找的内容。非常感谢您的帮助。

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