Question

我有一些隐藏的文字，我想在点击按钮时显示。

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

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

如果删除下面的功能，则可以单击但不适用于悬停状态：

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

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

});

Answer 1

我稍微修改了您的代码，将collapse用作类而不仅仅是hover。你需要这两个类，因为你想拥有两个不同的状态（折叠而不是折叠），每个状态都有它自己的悬停。您的第一次尝试失败是因为无论您想要什么状态，您都会在悬停时将background-position重置为折叠位置。

DEMO

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

    });

});

CSS

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

jquery悬停和切换

1 个答案: