html鼠标悬停边框变虚线,jQuery实现流动虚线框

.dashed-box {

width:500px;

height:100px;

border:2px solid #ccc;

}

.dashed-box:hover {

width:504px;

height:104px;

overflow:hidden;

position:relative;

border:none;

}

.dashed-box:hover .dashed-top {

width:2000px;

height:0px;

border-bottom:2px #ccc dashed;

position:absolute;

top:0;

left:-1400px;

}

.dashed-box:hover .dashed-top {

width:2000px;

height:0px;

border-bottom:2px #ccc dashed;

position:absolute;

top:0;

left:-1400px;

}

.dashed-box:hover .dashed-left {

width:0px;

height:2000px;

border-left:2px #ccc dashed;

position:absolute;

left:0;

top:-1600px;

}

.dashed-box:hover .dashed-bottom {

width:2000px;

height:0px;

border-bottom:2px #ccc dashed;

position:absolute;

left:0px;

bottom:0;

}

.dashed-box:hover .dashed-right {

width:0px;

height:2000px;

border-left:2px #ccc dashed;

position:absolute;

right:0;

top:-1600px;

}

.dashed-box-content {

padding:5px;

}

.dashed-box:hover .dashed-box-content {

padding:7px;

}