javascript - 离李最近的图片

Question

我只想为菜单图标设置动画。如果我删除 closest('img') 它会为整个 li 赋予动画效果。

这不起作用:

//animate menu icons
$('.nav-item').hover(function() {
  console.log('entered');
  $(this).find('img').toggleClass('animated swing');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

    <ul class="nav">
        <li class="nav-item">
            <a class="nav-link" href="dashboard">
                <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
                <span class="menu-title">Dashboard</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="general-setup" onclick="gitLabFetch()" id="createEnviromentTab">
                <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
                <span class="menu-title">Create Environment</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="collapse" href="#docker-pages" aria-expanded="false" aria-controls="testing-pages">
                <img src="../resources/img/icons/docker-icon.png" alt="">
                <span class="menu-title">Docker <i class="fa fa-sort-down"></i></span>
            </a>
            <div class="collapse" id="docker-pages">
                <ul class="nav flex-column sub-menu">
                    <li class="nav-item">
                        <a class="nav-link" href="docker-status">
                            <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
                            <span class="menu-title">Container Status</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="container-creation">
                            <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
                            <span class="menu-title">Container Creation</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="docker-logs">
                            <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
                            <span class="menu-title">Container Logs</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="docker-console">
                            <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
                            <span class="menu-title">Container Console</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="docker-images">
                            <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
                            <span class="menu-title">Images</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="docker-volumes">
                            <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
                            <span class="menu-title">Volumes</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="docker-info">
                            <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
                            <span class="menu-title">Information</span>
                        </a>
                    </li>
                </ul>
            </div>
        </li>
        </ul>

Answer 1

您的 HTML 结构如下: .nav-item嵌套在.nav-item内。 <li> element 是一个 block 级元素，在您的 dom 层次结构中，您有一个大的 block 级元素(示例中的第三个 <li> )，您可以在其上应用悬停。在这个 block 级元素中，有许多图像(恰好在其他 .nav-item 中，这可能会让您感到困惑)。这个大的悬停区域是由第三个 <li> 创建的导致所有嵌套图像切换。

要修复您的特定示例，您可以隔离每个 hover行动到.nav-item a在执行 find 之前选择器操作来获取每个 anchor 而不是每个列表项的特定子图像。

$('.nav-item a').hover(function() {
    $(this).find('img').toggleClass('animated swing');
});