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}