1

有两种方法可以做到这一点，就像我在没有闪光灯的情况下看到的那样。

当您将鼠标移到图像上时；它逐渐变为悬停类。或者，当您将鼠标悬停在图像上时，边距会改变每一侧，无论哪种方式都是水平的。

第一种方法会更好，但归根结底是CSS。当您将鼠标悬停在它上面时，我希望此按钮逐渐下沉 - 并且您将鼠标移开，它会弹回：

html

<center><br /><br />
<a href="#"><img src="//gc-cdn.com/button.png" alt=""></a>
</center>

CSS

img{border-right:15px solid #333;border-bottom:15px solid #333}
img:hover{border-right:1px solid #333;border-bottom:1px solid #333}

jsFiddle

http://jsfiddle.net/fk6eG/9/

4

1 回答 1

3

您不需要 javascript 来执行此操作，您可以使用 CSS 过渡：

img{
    border-right:15px solid #333;
    border-bottom:15px solid #333;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
img:hover{border-right:1px solid #333;border-bottom:1px solid #333}​

更新小提琴：http: //jsfiddle.net/fk6eG/15/

编辑：对于 jquery 解决方案，您可以使用 jquery UI切换类方法：

CSS：

 .c1{border-right:15px solid #333;border-bottom:15px solid #333;}
 .c2{border-right:1px solid #333;border-bottom:1px solid #333}​

Javascript：

$(".c1").hover(function () {
        $(this).switchClass("c1", "c2", 1000);        
    }, function () {
        $(this).switchClass("c2", "c1", 1000);    
    });​

小提琴样本：http: //jsfiddle.net/fk6eG/23/

于 2012-09-25T14:13:52.090 回答