Question

我想仅设置菜单图标的动画。如果我删除closest('img')，则会激活整个li。

这不起作用：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

试试这段代码。

<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 class="menu-image" 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 class="menu-image" 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 class="menu-image" 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  class="menu-image" 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 class="menu-image" 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 class="menu-image" 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 class="menu-image" 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 class="menu-image" 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 class="menu-image" 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 class="menu-image" 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>

{{1}}

Answer 2

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

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

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

来自li的最近图片

2 个答案: