（整）鼠标滑过div边框特效

最新推荐文章于 2022-01-06 16:08:36 发布

兰亭序乱

最新推荐文章于 2022-01-06 16:08:36 发布

阅读量1.7k

点赞数 1

分类专栏：前端学习笔记文章标签：前端

学习笔记同时被 2 个专栏收录

2 篇文章

订阅专栏

前端

0 篇文章

订阅专栏

本文介绍两种实现鼠标悬停时元素边框动画的方法。一种使用CSS和jQuery，通过动态改变边框高度和宽度实现动画效果；另一种仅用CSS，加入a标签，使边框在鼠标悬停时平滑展开。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

额，大致的样式就是链接里的样子，只不过我把它改成逆时针动画显示与消失了，感觉好看点。

其实就是改了左边框和右边框的上下定位，bottom变成top，top变成bottom罢了。

部分代码与演示地址：http://www.jq22.com/webqd2674

方法一：css+jquery实现，不需要a标签

<!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;
}
.common{
background:black;
position:absolute;
}
.box {
width:300px;
height:150px;
margin:20px auto;
position:relative;
border:1px solid #eee;
}
.box .border-left {
width:1px;
height:0px;
left:-1px;
bottom:0;
}
.box .border-bottom {
width:0px;
height:1px;
right:0;
bottom:0px;
}
.box .border-top {
width:0px;
height:1px;
left:0;
top:0px;
}
.box .border-right {
width:1px;
height:0px;
right:-1px;
top:0;
}
</style>
</head>
<body>
<div class="box">
    <div class="border-left common"></div>
    <div class="border-bottom common"></div>
    <div class="border-top common"></div>
    <div class="border-right common"></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-bottom,.border-top').stop().animate({
                width: lanren_width + 'px'
            }, 400);
        }, function() {
            $(this).find('.border-left,.border-right').stop().animate({
                height: '0'
            }, 400);
            $(this).find('.border-bottom,.border-top').stop().animate({
                width: '0'
            }, 400);
        });
    });
});
</script>
</body>
</html>

方法二：纯css样式实现，需要加a标签，代码量少一些

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">	
.wrap {
	width:840px;
	margin:50px auto;
	height:300px;
}
.wrap a {
	float:left;
	width:180px;
	height:180px;
	margin:10px;
	border:2px solid #ccc;
	position:relative;
}
.wrap a .common{
	display:inline-block;
	position:absolute;
	background:#ff0000;
	transition:.5s
}
.wrap a .top {
	left:-1px;
	top:-2px;
	width:0px;
	height:2px;	
}
.wrap a .right {
	right:-1px;
	top:0;
	width:2px;
	height:0px;
}
.wrap a .bottom {
	bottom:-1px;
	right:-1px;
	width:0px;
	height:2px;
}
.wrap a .left {
	left:-1px;
	bottom:0;
	width:2px;
	height:0px;
}
.wrap a:hover .top,.wrap a:hover .bottom {
	width:101%;
	transition:.5s;
}
.wrap a:hover .right,.wrap a:hover .left {
	height:100%;
	transition:.5s;
}
</style>
<body>
<div class="wrap">
    <a href="javascript:void(0)">
        <span class="top common"></span>
        <span class="right common"></span>
        <span class="bottom common"></span>
        <span class="left common"></span>
    </a>
</div>
</body>
</html>