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以外的内容，否则此选项无效。

从元素中选择img

1 个答案: