简介

jquery.hoverdir.js是一款非常不错的响应鼠标移动方向的悬停效果工具，移动过渡效果非常的自然。

使用

1.  引入 jquery.js 和 jquery.hoverdir.js 文件

2.  HTML

<ul id="da-thumbs" class="da-thumbs">
<li>
<a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning">
<img src="images/7.jpg" />
<div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
</a>
</li>
<li>
<!-- ... -->
</li>
<!-- ... -->
</ul>

CSS

.da-thumbs li {
	float: left;
	margin: 5px;
	background: #fff;
	padding: 8px;
	position: relative;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.da-thumbs li a,
.da-thumbs li a img {
	display: block;
	position: relative;
}
.da-thumbs li a {
	overflow: hidden;
}
.da-thumbs li a div {
	position: absolute;
	background: rgba(75,75,75,0.7);
	width: 100%;
	height: 100%;
}

3.  调用

$(function() {
$(‘#da-thumbs > li’).hoverdir();
});

相关链接

官网地址：https://tympanus.net/codrops/

演示地址 ：https://tympanus.net/TipsTricks/DirectionAwareHoverEffect/