您的位置：首页 > Web前端 > CSS

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

2015-01-14 19:17 309 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js 鼠标悬浮

相关文章推荐

新的分享

章节导航