将鼠标悬停在幻灯片上切换(2 格）

Hover on slideToggle (2 divs)

本文关键字：鼠标 悬停 幻灯片      更新时间：2023-09-26

我的javascript/jquery遇到了问题。

我的屏幕底部有一个div，当我将鼠标悬停在它上面时，我希望一个div出现并停留在那里，当我用鼠标在它上面时。当我开箱即用时，它应该再次崩溃。我的网页：

<div id="footer">
            <div id="howitworksBtn">
                How it works
            </div>
            <div id="howitworksContent">
                Second box
            </div>
        </div>

还有我的Javascript，它还没有工作，所以请帮忙！

$("#howitworksBtn").hover(function () {
    $(this).parent().find("#howitworksContent").stop().slideToggle("slow");
    });

编辑：

我的css：

#howitworksBtn {
    width: 220px;
    height: 20px;
    margin: auto;
    text-align: center;
    background-color: gray;
    -moz-border-radius: 15px 15px 0 0;
    border-radius: 15px 15px 0 0;
}
#howitworksContent {
    margin: 0;
    display: none;
    background-color: gray;
    color: white;
    text-align: center;
    font-size: 3em;
    font-family: helvetica;
}
#footer {
    width: 100%;
    position: absolute;
    bottom: 0;
}

它出奇地非常简单。 :)

$("#howitworksBtn").parent().hover(function () {
        $(this).find("#howitworksContent").slideToggle("slow");
});

悬停需要 2 个函数作为参数：

.hover（） jQuery API 文档

$("#howitworksBtn").hover(
    function () {
        $(this).parent().find("#howitworksContent").stop().slideToggle("slow");
    },
    function () {
        $(this).parent().find("#howitworksContent").stop().slideToggle("slow");
    }
);
相关文章：