jquery悬停图像保持内容打开，直到mouseout

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()函数。这个函数允许两个参数，一个是鼠标输入，另一个是鼠标输出，所以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}