悬停/鼠标悬停更改颜色和比例？

Question

我正在尝试创建小而灰色的按钮，直到被蒙上阴影 - 然后它们变得很大并且变成彩色。

我已经使用了Soh Tanaka的真棒灰度教程 - ，但我无法弄清楚如何添加额外的参数让图像在被遮挡时也变大。

http://www.sohtanaka.com/web-design/examples/hover-over-trick/

任何帮助表示赞赏！

Answer 1

只是动画的宽度，高度，顶部，左侧和边距。下面是从http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/

$("ul.thumb li").hover(function() { 
     $(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/ 
     $(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/ 
      .animate({ 
       marginTop: '-110px', /* The next 4 lines will vertically align this image */ 
       marginLeft: '-110px', 
       top: '50%', 
       left: '50%', 
       width: '174px', /* Set new width */ 
       height: '174px', /* Set new height */ 
       padding: '20px' 
      }, 200); /* this value of "200" is the speed of how fast/slow this hover animates */ 

     } , function() { 
     $(this).css({'z-index' : '0'}); /* Set z-index back to 0 */ 
     $(this).find('img').removeClass("hover").stop() /* Remove the "hover" class , then stop animation queue buildup*/ 
      .animate({ 
       marginTop: '0', /* Set alignment back to default */ 
       marginLeft: '0', 
       top: '0', 
       left: '0', 
       width: '100px', /* Set width back to default */ 
       height: '100px', /* Set height back to default */ 
       padding: '5px' 
      }, 400); 
    }); 

Answer 2

Try this one make Two class 
    .before_hover{ 
     width:10px; 
     height:10px; 
    } 
    .on_hover{ 
     width:10px !important; 
     height:10px !important; 
    } 

    Jquery 
    $(document).ready(function(){ 
     $('ul li').hover(function(){ 
     $(this).siblings().removeClass('on_hover'); 
     $(this).addClass('on_hover'); 
     }, 
     function(){ 
     }); 

    }); 

    you can make required changes in css.