jquery hover image保持內容打開，直到鼠標移出

Question

如何獲取此腳本，點擊功能轉換爲懸停功能效果。

enter code herehttp://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> 

現在按鈕位於容器內。現在您可以使用容器作爲$('#footerSlideContainer').hover()函數。該功能允許兩個參數，在鼠標上的一個函數和一個鼠標了，所以你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

編輯 爲了保持顏色更改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}