jquery悬停和切换

我有一些隐藏的文本，我想在单击按钮时显示这些文本

该按钮有四种不同的显示状态。当文本未显示时，它应指向下方，当文本显示时，它应指向上方。此外，向下和向上还有悬停状态

我还希望当用户翻滚h1标签时，该按钮更改为悬停状态。它还应根据文本是否显示，显示正确的悬停状态

我有一本书

如果您删除下面的功能，它在单击时工作，但不适用于悬停状态：

    $('body.home .entry-content h1').hover(function() {
    $('#hide-text').css('background-position','-26px 0px');

}, function() {
    $('#hide-text').css('background-position','0px 0px');

});

---

我对您的代码进行了一些修改，将

collapse

用作一个类，而不仅仅是

hover

。您需要这两个类，因为您希望有两个不同的状态（折叠和未折叠），每个状态都有自己的悬停。您的第一次尝试失败，因为您正在将

背景位置

重置为悬停时的折叠位置，无论您打算处于何种状态

JQuery

jQuery(document).ready(function ($) {
    $('body.home .entry-content h1').append("<div id='hide-text'></div>");


    $('body.home .entry-content h1').hover(function () {
        $('#hide-text').addClass("hover");

    }, function () {
        $('#hide-text').removeClass("hover");
    });


    $('#hide-text').toggle(function () {
        $(this).addClass('collapse');
        $('body.home .entry-content h2').fadeIn(500);

    }, function () {

        $(this).removeClass('collapse');
        $('body.home .entry-content h2').fadeOut(500);

    });

});

---

非常感谢。真管用！我现在明白了，我应该创建两个类来处理这两个函数。这对我真的很有帮助。我对stackoverflow社区还是新手。回答其他成员的问题对我有好处吗？如果你是一个认真的开发人员，拥有一个SO档案可能对你的职业生涯有好处。这是招聘人员和雇主验证你技能的额外工具。这也是一种将孤独的程序员与那些能够帮助团队变得更好的程序员区分开来的方法。对于这个问题，如果我的答案已经解决了，只需单击我答案旁边的复选框并“接受”它。这样也可以提高你在各个领域的技能，因为你在自己看到问题之前就已经回答了问题。每周花几个小时回答问题，相当于我书中的继续教育。谢谢Michael的提示。你肯定可以通过帮助别人学到更多。我现在正在回答问题。我想我只是发烧了！

body.home .entry-content h2 {
    display: none;
}
#hide-text {
    display: inline-block;
    position: relative;
    top: 2px;
    height: 22px;
    width: 26px;
    margin-left: 15px;
    background: url('http://www.mgrear.com/clients/gls/wp-content/themes/gravity-lab-studios/images/home-button.png') 0px 0px no-repeat;
}
#hide-text:hover, #hide-text.hover {
    background: url('http://www.mgrear.com/clients/gls/wp-content/themes/gravity-lab-studios/images/home-button.png') -26px 0px no-repeat;
    cursor: pointer;
}
#hide-text.collapse {
    background: url("http://www.mgrear.com/clients/gls/wp-content/themes/gravity-lab-studios/images/home-button.png") -52px 0px no-repeat;
}
#hide-text.collapse:hover, #hide-text.collapse.hover {
    background: url("http://www.mgrear.com/clients/gls/wp-content/themes/gravity-lab-studios/images/home-button.png") -78px 0px no-repeat;
}