文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >离li最近的图像

问离li最近的图像
EN

Stack Overflow用户
提问于 2018-01-30 22:01:59
回答 2查看 62关注 0票数 1

我只想制作菜单图标的动画。如果我移除closest('img')，它将使整个li成为动画。

这不起作用：

​

代码语言：javascript
复制
//animate menu icons
$('.nav-item').hover(function() {
  console.log('entered');
  $(this).find('img').toggleClass('animated swing');
});
代码语言：javascript
复制
<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>

​

javascript
jquery
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-01-30 22:41:25

你的超文本标记语言的结构使得你在.nav-item中嵌套了.nav-item。<li>元素是一个块级元素，在您的dom层次结构中，有一个很大的块级元素(示例中的第三个<li> )，您可以在其上应用悬停。在这一个块级元素中有许多图像(这些图像恰好在其他.nav-item中，这可能会让您感到困惑)。由第三个<li>创建的这个大悬停区域会导致所有嵌套图像切换。

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

代码语言：javascript
复制
$('.nav-item a').hover(function() {
    $(this).find('img').toggleClass('animated swing');
});
票数 0
EN

Stack Overflow用户

发布于 2018-01-30 22:34:57

试试这段代码。

​

代码语言：javascript
复制
//animate menu icons
$('.nav-link').hover(function() {
  console.log('entered');
  $(this).find('.menu-image').toggleClass('animated swing');
});
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/48523285

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档