0

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

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

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

我有一个小提琴链接来演示。

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

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

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

});
4

1 回答 1

0

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

演示

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;
}
于 2013-02-11T20:20:28.700 回答