鼠标悬浮离开后最后的样式保持不变

最新推荐文章于 2024-04-20 11:14:30 发布

芒果终结者

最新推荐文章于 2024-04-20 11:14:30 发布

阅读量4.2k

点赞数 1

分类专栏：技术闲扯文章标签： js 鼠标悬浮

本文链接：https://blog.csdn.net/cs23405/article/details/42713971

版权

技术闲扯专栏收录该内容

2 篇文章 0 订阅

订阅专栏

说明：三个div层，鼠标放到哪个div,哪个div里的字体变成红色，其余的字体样式都为黑色，当鼠标离开后并且都不在三个div层上面后，把鼠标最后离开的那个div的样式变为红色

demo实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>test</TITLE>
<META content=IE=EmulateIE7 http-equiv=X-UA-Compatible>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<style>
div{height:30px;width:80px;color:#6D6D6D;}
div.mouse{color:red;}
</style>
<body>

<div class="mouse" data-index="0">
第一块div
</div>
<div data-index="1">
第二框div
</div>
<div data-index="2">
第三框div
</div>
<br/>
<span></span>
<script type="text/javascript">
$('div').mouseenter(function(){
	
	$(this).addClass('mouse').siblings().removeClass('mouse');
	var index = $(this).attr('data-index');
	$('span').html(index);
}).mouseleave(function(){
	$(this).removeClass('mouse');
	var i = $('span').html();
	$('div').eq(i).addClass('mouse');
	
	
});

</script>
</body>
</html>