將鼠標懸停在slideToggle上（2個div）

Question

我的javascript / jquery遇到了問題。

我的屏幕底部有一個div，當我將它懸停在它上面時，我希望當我用鼠標在它上面時，div會出現並留在那里。 當我開箱時，它應該再次崩潰。 我的HTML：

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

Answer 1

這非常簡單.. :)

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

Answer 2

hover需要2個函數作為參數：

.hover（）jQuery API文檔

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