javascript - Jquery 隐藏在鼠标悬停时显示特定的 div 元素

标签 javascript jquery html css

我对此有点挣扎,我可以整天隐藏/显示/淡化/淡化,但我试图让我的头脑围绕在我的目标元素和鼠标悬停时拉出其具体描述的逻辑,我有接近得到这个但感觉我错过了一些东西,下面是我的 HTML:

<ul id="menu" class="menu">
                        <li><a href="">Home</a></li>
                        <li id="menu1" class="menu-link"><a href="/">LINK1</a></li>
                        <li id="menu2" class="menu-link"><a href="/">LINK2</a></li>
                        <li id="menu3" class="menu-link"><a href="/">LINK3</a></li>
                        <li id="menu4" class="menu-link"><a href="/">LINK4</a></li>
                    </ul>
                    <div id="menu1content" class="menuDescription">
                        Description for "menu1"
                    </div>
                    <div id="menu2content" class="menuDescription">
                        Description for "menu2"
                    </div>
                    <div id="menu3content" class="menuDescription">
                        Description for "menu3"
                    </div>
                    <div id="menu4content" class="menuDescription">
                        Description for "menu4"
                    </div>

这是我的 CSS,想法是将描述放在其对应的

  • 元素之上 btw:

    .menu{
        font-family: 'LeagueGothicRegular';
        position: absolute;
        top:25px;
        overflow:hidden;
        right:100px;
        float:right;
    
    }
    .menu ul{
        float:left;
        width:100%;
        padding:0;
        margin:0;
        list-style-type:none;
    }
    .menu li{
        display:inline;
        clear:both;
        position:relative;
        overflow:hidden;
    }
    .menu li a{
        float:left;
        width:6em;
    }
    
    .menuDescription  {
        font-size: 11px;
        color: rgb(0, 0, 0);
        position: absolute;
        right: 407px;
        margin-left: 5px;
        top: 15px;
    }
    

    最后是 jquery:

    $(document).ready(function() {
        $('div.menuDescription').hide();
        $('li.menu-link').bind('mouseover', function() {
            $('#' + $(this).attr('id') + 'content').prependTo("li.menu-link").fadeIn();
        })
    
                .mouseout(function() {
                    $('#' + $(this).attr('id') + 'content').fadeOut();
                });
    
    });
    
  • 最佳答案

    当你在 2 组元素之间有一对一的关系并且它们在每组匹配中的顺序时,通常更容易使用索引而不是解析 ID

    var $content= $('div.menuDescription');
    var $links=$('.menu-link').hover(function(){
       /* "this" is element being hovered*/
       var index= $links.index(this);
       $content.stop().hide().eq(index).fadeIn(); 
    },function(){
       /* not sure if you want to leave current content visible if user leaves menu, if so do nothing here*/
    })
    

    DEMO

    关于javascript - Jquery 隐藏在鼠标悬停时显示特定的 div 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19823117/

    相关文章:

    jquery - 鼠标悬停在多个 td rowspan

    html - 如何更改&lt;input type ="file"/>的按钮文字?

    javascript - 每(例如)10 秒刷新 Genexus 中网页面板的一部分

    javascript - 具有非 jQuery/框架构建的路点

    html - 在 Bootstrap 中从包装器的一端到另一端创建 1px 侧边栏分隔符

    javascript - 使用 jQuery 添加类

    javascript - 将两个变量设置为同一 dom 元素时,jquery 语句未评估为 true

    javascript - 每次用对象删除 JS 数组时刷新 HTML 页面

    javascript - 类型 '_id' 上不存在属性 'string | JwtPayload' 。类型 '_id' 上不存在属性 'string'

    javascript - 单选按钮验证错误