jquery - CSS/JQuery 建议：显示悬停在链接上并切换 div

Question

我有一个链接（水平导航栏项目），当用户将鼠标悬停在它上面时，另一个div应该slideDown就在下面。.toggle不起作用，因为当您将鼠标悬停在链接上时，它会不断切换 div。

我尝试编写自己的使用mouseover，mouseOut但它太敏感并且div在显示器之间来回翻转（块，无）。

这是我的 jQuery：

    $(".topHorzNavLink").mouseover(function() {

    //get which link we hovered over
    var thisHorzLink = $(this).attr('linkItem');

    if (thisHorzLink == "link2") {

        $("#hoverContainer").slideDown('slow');

    }

});

$(".topHorzNavLink").mouseout(function() {

    //get which link we hovered over
    var thisHorzLink = $(this).attr('linkItem');

    if (thisHorzLink == "link2") {

        $("#hoverContainer").slideUp('slow');

    }

});

这是 HTML（我知道，呃，它在某些时候会是动态的）：

<nav id="topHorzNav">

            <div id="topHorzNavLinks">

                <ul>
                    <li><p class="topHorzNavLink" linkItem="link1"><a href="#">Link 1</a></p></li>
                    <li><p class="topHorzNavLink" linkItem="link2"><a href="#">Link 2</a></p>
                <div id="hoverContainer">
                    <div class="colContainer">
                        <div class="colContainer">
                            <div class="colContainer">
                                <div class="colContainer">
                                    <div class="colContainer">

                                        <!--col 1-->
                                        <div class="col">
                                            <p class="colHeader">Heading 1</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                        </div>

                                        <div class="colDivider">&nbsp;</div>

                                        <!--col2 -->
                                        <div class="col">
                                            <p class="colHeader">Heading 2</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                        </div>

                                        <div class="colDivider">&nbsp;</div>

                                        <!--col3 -->
                                        <div class="col">
                                            <p class="colHeader">Heading 3</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                        </div>

                                        <div class="colDivider">&nbsp;</div>

                                        <!--col4 -->
                                        <div class="col">
                                            <p class="colHeader">Heading 4</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                        </div>

                                        <div class="colDivider">&nbsp;</div>

                                        <!--col5 -->
                                        <div class="col">
                                            <p class="colHeader">Heading 5</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                    </li>
                    <li><p class="topHorzNavLink"><a href="#" class="topHorzNavLink" linkItem="link3">Link 3</a></p></li>
                    <li><p class="topHorzNavLink"><a href="#" class="topHorzNavLink" linkItem="link4">Link 4</a></p></li>
                </ul>

            </div>

            <div id="topHorzNavRight">&nbsp;</div>

        </nav>
        <!--end top horz nav items-->

score 1 · Accepted Answer

您需要使用该.stop()功能清除排队的动画，否则每次进出时<li>都会触发更多动画。另一个问题是，即使指针位于子元素内mouseover()，您也正在使用它触发动画。还会创建当指针离开子元素时冒泡的事件。你最好使用and 。mouseout().mouseenter().mouseleave()

这是一个使用 HTML5 和 jQuery 1.7.2的演示。我不得不说你的例子非常冗长！

HTML

<nav>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a>
            <div>
                <!--col 1-->
                <section>
                    <header><h1>Heading 1</h1></header>
                    <article>
                        <p class="colText">Lorem Ipsum Dolar</p>
                        <p class="colText">Lorem Ipsum Dolar</p>
                    </article>
                </section>
                <!--col2 -->
                <section>
                    <header><h1>Heading 2</h1></header>
                    <article>
                        <p class="colText">Lorem Ipsum Dolar</p>
                        <p class="colText">Lorem Ipsum Dolar</p>
                    </article>
                </section>
                <section>
                    <header><h1>Heading 3</h1></header>
                    <article>
                        <p class="colText">Lorem Ipsum Dolar</p>
                        <p class="colText">Lorem Ipsum Dolar</p>
                    </article>
                </section>
                <section>
                    <header><h1>Heading 4</h1></header>
                    <article>
                        <p class="colText">Lorem Ipsum Dolar</p>
                        <p class="colText">Lorem Ipsum Dolar</p>
                    </article>
                </section>
                <section>
                    <header><h1>Heading 4</h1></header>
                    <article>
                        <p class="colText">Lorem Ipsum Dolar</p>
                        <p class="colText">Lorem Ipsum Dolar</p>
                    </article>
                </section>
            </div>
        </li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
    </ul>
</nav>

CSS

ul {
    width:150px;
}
li {
    border:1px dashed lightgrey;
}
li > div {
    display:none;
}
h1 {
   font-size:14px;
}

section {
    padding-bottom:8px;
    border-bottom:1px dashed lightblue;
}

</p>

JavaScript

$('li').on({
    mouseenter: function() {
        $(this).find('div:first').stop(true, true).slideDown('slow');
    },
    mouseleave: function() {
        $(this).find('div:first').stop(true, false).slideUp('slow');
    }
});

score 0 · Accepted Answer

你最好使用这个hover()功能。它有两个参数，每个参数都是一个函数。第一个是针对mouseover事件的，第二个是针对mouseout事件的。

我尝试了以下代码并且它有效：

$(function() {  
$('#nav-list>li').hover(function(e) {
    $(this).children('ul').slideDown(300);
}, function(e) {
    $(this).children('ul').slideUp(200);
});
});

jquery - CSS/JQuery 建议：显示悬停在链接上并切换 div

2 回答 2

HTML

CSS

JavaScript

Related

Reference