文章内容
2017/1/5 17:03:33,作 者: 黄兵
Jquery鼠标悬停效果
首先还是老规矩上效果：
接下来开始上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box{width: 600px; height: 200px;background: #f5f5f5}
.box1{width: 600px;height: 200px;background: #ccc;margin-top: 80px;}
.hover-border{display: inline-block;position: absolute;z-index: 100}
.left-right-border{height: 0;}
.left-border{ left: 0px;}
.right-border{ right: 0px;bottom: 0px;}
.left-right-top-bottom-border{width: 0;}
.left-top-border{right: 50%;top: 0px;}
.left-bottom-border{left: 0px;bottom: 0px;}
.right-top-border{right: 0px;top: 0px;}
.right-bottom-border{left: 50%;bottom: 0px;}
</style>
</head>
<body>
div class="box"><img src="a1.png"></div>
<div class="box1"><img src="a2.png"></div>
<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.pdf-lib.org/Images/UpLoadImages/jquery.niceHover.js"></script>
<script type="text/javascript">
$(".box,.box1").niceHover({weight:1,color:"#530091"});
</script>
</body>
</html>
评论列表