鼠标悬停边框围绕效果--动态边框

知秋~

已于 2022-06-14 14:52:26 修改

阅读量1.9k

点赞数

文章标签： javascript html css

于 2018-04-08 22:37:33 首次发布

本文链接：https://blog.csdn.net/qq_38881495/article/details/79859335

版权

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>鼠标悬停边框围绕效果</title>
		<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
		<style>
			* {
				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;
			}

			.box .border-right {
				width: 1px;
				height: 0px;
				background: black;
				position: absolute;
				right: -1px;
				top: 0;
			}
		</style>
	</head>
	<body>
		<div class="box">
			    <img src="http://dev.ixincheng.com/xcview/images/xianxia_03.jpg">
			    <div class="border-left"></div>
			    <div class="border-bottom"></div>
			    <div class="border-top"></div>
			    <div class="border-right"></div>
		</div>
		<div class="box">
			    <img src="http://dev.ixincheng.com/xcview/images/xianxia_03.jpg">
			    <div class="border-left"></div>
			    <div class="border-bottom"></div>
			    <div class="border-top"></div>
			    <div class="border-right"></div>
		</div>


		<script>
			$(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);
					});
				});
			});
		</script>

	</body>

</html>