PROMULGATOR

    单身的人普遍优秀

    河南省焦作市
    Html
    Css
    Js
1
2
3
4
5
6
7
<div class="box">
    <img src="http://www.jq22.com/img/cs/500x300-1.png">
    <div class="border-left"></div>
    <div class="border-bottom"></div>
    <div class="border-top"></div>
    <div class="border-right"></div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
* {
    margin:0;
    padding:0;
    list-style:none;
}
img {
    border:0;
    width:300px;
    height:150px;
}
.box {
    width:300px;
    height:150px;
    margin:20px auto;
    position:relative;
    border:1px solid #eee;
}
.box .border-left {
    width:1px;
    height:0px;
    background:black;
    position:absolute;
    left:-1px;
    bottom:0;
}
.box .border-bottom {
    width:0px;
    height:1px;
    background:black;
    position:absolute;
    left:0;
    bottom:0px;
}
.box .border-top {
    width:0px;
    height:1px;
    background:black;
    position:absolute;
    right:0;
    top:0px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(function() {
    var lanren_width = $('.box').width();
    var lanren_height = $('.box').height();
    $('.box').each(function() {
        $(this).hover(function() {
            $(this).find('.border-left,.border-right').stop().animate({
                height: lanren_height + 'px'
            }, 400);
            $(this).find('.border-top,.border-bottom').stop().animate({
                width: lanren_width + 'px'
            }, 400);
        }, function() {
            $(this).find('.border-left,.border-right').stop().animate({
                height: '0'
            }, 400);
            $(this).find('.border-top,.border-bottom').stop().animate({
                width: '0'
            }, 400);
        });
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.8.3
 立即下载

鼠标悬停边框围绕效果

0