Question

假设我有一个facebook徽标图片。此图像也可用作我的Facebook个人资料的链接。现在，我希望一旦用户将鼠标光标放在它上面，它就应该增加高度（让我们说3 px）。

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

   .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)缩放高度。

尽管如此，最好先从比例因子＆lt; 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);
}

Answer 2

如果你只想要css修复，请使用这个小提琴 http://jsfiddle.net/4wpw6add/4/

#inc_fb_height{
height:120px; 
}


#inc_fb_height:hover{
height:124px; 
}

如果你可以使用javascript

，请使用这个小提琴

http://jsfiddle.net/4wpw6add/5/

.img-zoom:hover {
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
}

.transition {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

jquery的

 $(document).ready(function(){
    $('.img-zoom').hover(function() {
        $(this).addClass('transition');

    }, function() {
        $(this).removeClass('transition');
    });
  });

Answer 3

我为此创造了一个JS小提琴。 - JS FIDDLE

 #inc_fb_height:hover{
    height:500px; /* new height*/
    }

Answer 4

使用你拥有的东西：

#inc_fb_height{
height:100px; 
}

但随后添加

#inc_fb_height:hover{
height:103px; 
}

创建一个悬停属性，该属性获取原始内容并在mouse hover上将其更改为3px更高

Answer 5

向图像添加悬停状态：

HTML：

<div id="find_me_on">
    <p>Find me on:</p> <a href="https://www.facebook.com/unknownuser"><img src="http://www.insidefacebook.com/wp-content/uploads/2013/01/profile-150x150.png" title="Facebook" id="inc_fb_height" /></a>
</div>

CSS：

img#inc_fb_height {
    position: relative;
    height: 150px;
}
img#inc_fb_height:hover {
    height: 153px;
}

小提琴： http://jsfiddle.net/jazztorbs/k3u1dLna/

HTML＆amp; CSS问题：如何通过将图像悬停在图像上来增加图像（＆＃39; s）的高度？

5 个答案: