jquery - 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}