jquery实现卡片文字智能感知鼠标方向弹出效果代码-html代码-BFW代码库

jquery实现卡片文字智能感知鼠标方向弹出效果代码

代码语言：html

所属分类：悬停

代码描述：jquery实现卡片文字智能感知鼠标方向弹出效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">

		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
				text-decoration: none;
			}
			body{
				background: #434343;
			}
			.box{
				width:568px;
				height:486px;
				background: #222;
				margin: 50px auto;
				box-shadow: 0 0 8px 3px #FFFFFF;
			}
			.box ul li{
				position: relative;
				width: 164px;
				height: 220px;
				border: 1px solid #FFFFFF;
				float: left;
				margin: 10px;
				overflow: hidden;
			}
			.box ul li img{
				width: 164px;
				height: 220px;
			}
			.txt{
				position: absolute;
				top: 0px;
				left:-100%;
				width: 154px;
				height: 220px;
				background: url(//repo.bfw.wiki/bfwrepo/image/5e4350528640e.png);
				padding: 0 5px;
			}
			.txt h2{
				color: #FFFFFF;
				font-size: 18px;
				text-align: center;
				margin-top: 20px;
				border-bottom: 1px dashed #FFFFFF;
				padding-bottom: 5px;
			}
			.txt p{
				color: #FFFFFF;
				font-size: 14px;
				line-height: 20px;
				margin: 10px 4px 8px;
				font-family: "微软雅黑";
			}
			.btn{
				 width: 80px;
				 height: 30px;
				 backgroun.........完整代码请登录后点击上方下载按钮下载查看