JS小技巧：鼠标悬停事件

最新推荐文章于 2023-11-14 21:19:11 发布

偷猪的王某人

最新推荐文章于 2023-11-14 21:19:11 发布

阅读量1.9k

点赞数 2

本文链接：https://blog.csdn.net/qq_44642822/article/details/103085916

版权

简单的JS悬停图片变换

不多bb先看效果图
可以看到鼠标悬停在不同的标题上时，下方的图片会产生相应变换

代码如下

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			body,
			html {
				width: 100%;
				height: 100%;
			}
			
			#box {
				width: 730px;
				height: 335px;
				background-color: #ffcccc;
				margin: 250px auto 0 auto;
			}
			
			.top {
				position: absolute;
				list-style: none;
				cursor: pointer;
			}
			
			li {
				float: left;
				width: 182.5px;
				height: 44px;
				line-height: 44px;
				text-align: center;
				cursor: pointer;
				font-size: 18px;
				background: rgba(255,255,255,0.5);
			}
			li.active{
				background: rgba(255,255,255,0);
				color: white;
			}
			.bg{
				width: 730px;
				height: 335px;
				background: url(../img/0.jpg);
			}
		</style>
	</head>

	<body>
		<div id="box">
			<ul class="top">
				<li class="active">新流派龙吟</li>
				<li>红尘羁绊</li>
				<li>区域链赋能</li>
				<li>会呼吸的江湖</li>
			</ul>
			<div class="bg"></div>
		</div>
		<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
		<script>
			$('#box .top li').hover(function ni(){
				$(this).addClass('active').siblings().removeClass('active');
				$('.bg').css('background-image','url(../img/'+$(this).index()+'.jpg)')
			})
		</script>
	</body>
</html>

注意在script当中的$选择选择器是中间用" "隔开，最重要的一点：图片的路径是连续的，看清楚路径不然加载不了图片
如需原图QQ3054718283

偷猪的王某人

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
JS小技巧：鼠标悬停事件

简单的JS悬停图片变换不多bb先看效果图可以看到鼠标悬停在不同的标题上时，下方的图片会产生相应变换代码如下<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> * { ma...
复制链接

扫一扫