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

来源：互联网发布：mac系统如何安装sass 编辑：程序博客网时间：2024/05/18 01:45

说明：三个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>

0 0