jquery hover и toggle

Question

У меня есть текст, который скрыт, который я хотел бы отображать при нажатии кнопки.

Кнопка имеет четыре различных состояния дисплея. Когда текст не отображается, он должен указывать вниз, а когда текст отображается, он должен указывать вверх. Кроме того, есть наклонные состояния для вниз и вверх.

Я также хотел бы, чтобы кнопка изменилась до состояния зависания, когда пользователь перевернул тег h1. Он также должен показывать правильное зависание, основанное на том, отображается ли текст.

У меня есть fiddle link to demonstrate.

Если вы удалите функцию ниже он работает по щелчку, но не для государства парения:

$('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; 
}