0

ボタンがクリックされたときに表示したい非表示のテキストがあります。

ボタンには 4 つのさまざまな表示状態があります。テキストが表示されていないときは下向きで、テキストが表示されているときは上向きにする必要があります。さらに、ダウンとアップのホバー状態があります。

また、ユーザーが 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。2 つの異なる状態 (折りたたまれた状態と折りたたまれていない状態) をそれぞれ独自のホバーで使用する必要があるため、両方のクラスが必要です。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 に答える