鼠标经过图片四周加线条

css

<style type="text/css">
			*{
				margin: 0;padding: 0;
			}
			.box{
				overflow: hidden;
				position: relative;
				margin: 120px auto;
				width: 400px;
				height: 255px;
			}
			.box img{
				width: 100%;
			}
			.box hr{
				border: none;
				position: absolute;
			}
			.box .l{
				width: 3px;
				height: 255px;
				background-color: orangered;
				left:0;
				top:-255px;
			}
			.box .t{
				width: 400px;
				height: 3px;
				background-color: orangered;
				left:-400px;
				top:0;
			}
			.box .r{
				width: 3px;
				height: 255px;
				background-color: orangered;
				right: 0;
				bottom:-255px;
			}
			.box .b{
				width: 400px;
				height: 3px;
				background-color: orangered;
				left: 400px;
				bottom: 0;
			}
			.box .shang{
				transform: translateX(400px);
				transition: all .6s;
			}
			.box .zuo{
				transform: translateY(255px);
				transition: all .6s;
			}
			.box .you{
				transform: translateY(-255px);
				transition: all .6s;
			}
			.box .xia{
				transform: translateX(-400px);
				transition: all .6s;
			}
			.box .fu{
				transition: all .6s;
			}
		</style>

html

<div class="box">
			<hr class="l a">
			<hr class="t a">
			<img src="../img/mn.jpeg">
			<hr class="r a">
			<hr class="b a">
		</div>

jquery

$(function(){
				var l = $(".box .l");
				var t = $(".box .t");
				var r = $(".box .r");
				var b = $(".box .b");
				var a = $(".box .a");
				$(".box").hover(
				function(){
					a.removeClass("fu");
					l.addClass("zuo");
					t.addClass("shang");
					r.addClass("you");
					b.addClass("xia");
				},function(){
					l.removeClass("zuo");
					t.removeClass("shang");
					r.removeClass("you");
					b.removeClass("xia");
					a.addClass("fu");
					})
				})