javascript - 从元素中选择 img

Question

请问你能帮我吗？我想选择“img”，光标在菜单“li.menu_item”上，有些像这样:$('li.menu_item a').children('img')...，但这一个不起作用...我希望它在 jQuery 中具有动画效果...

<ul class="menu">
            <li class="menu_item"><a class="selected" href="#"> domů </a></li>
            <li class="menu_item"><a href="#">
                <div>
                    <img class="img_mask" src="design/btndark.png" />
                </div>
                <div class="menu_mask">fotografie</div>
            </a></li>
            <li class="menu_item"><a class="nonselect" href="#">
                <div>
                    <img class="img_mask" src="design/btndark.png" />
                </div>
                <div class="menu_mask">
                    rezervace
                </div>
            </a></li>
            <li class="menu_item"><a class="nonselect" href="#">
                <div>
                    <img class="img_mask" src="design/btndark.png" />
                </div>
                <div class="menu_mask">
                    konetakt
                </div>
            </a></li>
            <li class="cl"></li>
        </ul>

<script type="text/javascript">

$(function() {

    $('.img_mask').animate({
        "opacity" : .0
    });

    $('li.menu_item a').hover(
        // problem je jeste v tom, ze pokud rychle prejizdim pres prvky, tak se "dopredu najedou" a kdyz jsem uz mimo obrazek, jeste blikaji...
        // tento problem lze vyresit tim, ze zkontruluju jestli bylo animovano
        // takze reknu funkci hover, ze nejprve ma zastavit a az pak animovat
        function() {
            $('.img_mask').stop().animate({ "opacity" : .8 });
        },
        function() {
            $('.img_mask').stop().animate({ "opacity" : .0 });
        }
    );

});

</script>

Answer 1

使用this引用当前悬停的项目:

$('li.menu_item a').hover(
    function() {
        $(this).find('.img_mask').stop().animate({ "opacity" : .8 });
    },
    function() {
        $(this).find('.img_mask').stop().animate({ "opacity" : .0 });
    }
);

除了您似乎有 <div>嵌套在您的 <a> 中的标签标签。除非您创建了<a>，否则此操作无效。元素display:block或除 inline 之外的其他东西.