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;
				 background: cornflowerblue;
				 display: block;
				 color: #FFFFFF;
				 font-family: "微软雅黑";
				 font-size: 14px;
				 line-height: 30px;
				 text-align: center;
				 margin:0 auto;
				 cursor: pointer;
				 border-radius: 5px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li>
					<img src="//repo.bfw.wiki/bfwrepo/image/5e4b4000794db.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_150,/quality,q_90"/>
					<div class="txt">
						<h2>好吃的培根</h2>
						<p>
							培根是西式肉制品三大主要品种(火腿、香肠)之一，其风味除带有适口的咸味之外，还具有浓郁的烟熏香味。
						</p>
						<a href="javaScript:" class="btn">查看详情</a>
					</div>
				</li>
				<li>
					<img src="//repo.bfw.wiki/bfwrepo/image/5fbedf8f5349c.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_150,/quality,q_90"/>
					<div class="txt">
						<h2>好吃的培根</h2>
						<p>
							培根是西式肉制品三大主要品种(火腿、香肠)之一，其风味除带有适口的咸味之外，还具有浓郁的烟熏香味。
						</p>
						<a href="javaScript:" class="btn">查看详情</a>
					</div>
				</li>
				<li>
					<img src="//repo.bfw.wiki/bfwrepo/image/5d653ba895333.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_150,/quality,q_90"/>
					<div class="txt">
						<h2>好吃的培1根</h2>
						<p>
							培根是西式肉制品三大主要品种(火腿、香肠)之一，其风味除带有适口的咸味之外，还具有浓郁的烟熏香味。
						</p>
						<a href="javaScript:" class="btn">查看详情</a>
					</div>
				</li>
				<li>
					<img src="//repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_150,/quality,q_90"/>
					<div class="txt">
						<h2>好吃的培2根</h2>
						<p>
							培根是西式肉制品三大主要品种(火腿、香肠)之一，其风味除带有适口的咸味之外，还具有浓郁的烟熏香味。
						</p>
						<a href="javaScript:" class="btn">查看详情</a>
					</div>
				</li>
				<li>
					<img src="//repo.bfw.wiki/bfwrepo/image/5d653be845a41.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_150,/quality,q_90"/>
					<div class="txt">
						<h2>好吃的培3根</h2>
						<p>
		.........完整代码请登录后点击上方下载按钮下载查看