HTML 和 CSS 问题 : How can I increase an image('s) height by hovering over it?

Question

假设，我有一个 facebook Logo 图像。此图片还可以用作我的 Facebook 个人资料的链接。现在，我希望只要用户将鼠标光标放在它上面，它就应该增加高度(比如 3 像素)。

这是我正在处理的源代码:

   .HTML:

     <div id="find_me_on">

        <p>Find me on:</p><br><a href="https://www.facebook.com/unknownuser"><img src="img/fblogo.png" title="Facebook" id="inc_fb_height" /></a>
        </div


    .CSS:

  #inc_fb_height{
    /*Need help*/
    }

Answer 1

不要为这些事情浪费 JavaScript(尤其是 jQuery)，您只需要 CSS:

#inc_fb_height {
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

#inc_fb_height:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

当然你也可以使用 scale(1, 1.1) 或 scaleY(1.1) 来缩放高度。

不过，最好从比例因子 <1 开始并将悬停时的比例设置为 1 - 以避免图片模糊。

这是带有 scale3d 的版本，因此它使用硬件加速(在那种情况下并不真正需要，但#yolo):

#inc_fb_height {
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
    -webkit-transform: scale3d(0.9, 0.9, 1);
    -moz-transform: scale3d(0.9, 0.9, 1);
    -ms-transform: scale3d(0.9, 0.9, 1);
    -o-transform: scale3d(0.9, 0.9, 1);
    transform: scale3d(0.9, 0.9, 1);
}

#inc_fb_height:hover {
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}