jquery - jqueryホバー画像は、マウスアウトまでコンテンツを開いたままにします

Question

ホバー機能効果に変換されたクリック機能であるこのスクリプトを取得するにはどうすればよいですか。

enter code here http://jsfiddle.net/K55ct/78/

小さなボックスにカーソルを合わせて、下の div コンテンツを好きなだけマウスオーバーできるようにしたいと思います。マウスを離すと、div が再び非表示になります

Answer 1

htmlをこれに変更します

<div id="footerSlideContainer"> 
   <div id="footerSlideButton"></div>
   <div id="footerSlideContent">
      <div id="footerSlideText">
         <div id="footer_higher">
            <div id="footer_content">
               <div class="footbox"></div>
                  <div class="clear"></div>
            </div>
         </div>
      </div>
   </div>
</div>

これで、Button がコンテナー内に配置されました。$('#footerSlideContainer').hover()これで、コンテナを関数に使用できます。この関数は、2 つのパラメーターを使用できます。1 つはマウス インの関数で、もう 1 つはマウス アウトの関数です。したがって、jQuery の部分は次のようになります。

jQuery(function($) {
    $('#footerSlideContainer').hover(function () {
            $('#footerSlideContent').animate({ height: '230px' });
            $(this).css('backgroundPosition', 'top left');
        },
        function() {
            $('#footerSlideContent').animate({ height: '0px' });
            $(this).css('backgroundPosition', 'top left');
        }
    );      
});

デモ: jsFiddle

EDIT 色を維持するには、CSSを次のように変更します。

#footerSlideContainer{position:fixed;top:50px;width:360px;left:0px}
#footerSlideButton{background:red;position:fixed;top:0;left:0px;width:50px;height:50px}
#footerSlideContainer:hover #footerSlideButton{background:green}
#footerSlideContent{height:0;background:blue}