标签：javascript moveover moveout 悬停 div
<!--
author:IluckySi
since:20150331
功能:一个父div下面有多个子div,如何实现鼠标悬停到子div上面,子div添加class.
-->
<!DOCTYPE html>
<html>
<head>
<title>mouse.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
.child {
width:100px;
height:100px;
background-color:red
}
.currentChild {
width:120px;
height:120px;
background-color:black
}
</style>
<script src="../../jquery/jquery-1.11/jquery.min.js"></script>
<script>
$(function() {
//获取所有子div.
var children = $('div#parent > div');
//错误方法:会给所有子div添加class.
/* children.mouseover(function(e) {
children.addClass('currentChild');
}).mouseout(function(e) {
children.removeClass('currentChild');
}); */
//正确方法:通过each为每个子div添加class.
children.each(function(i){
//注意:this是js对象,$(this)是jquery对象.
$(this).mouseover(function(e) {
$(this).addClass('currentChild');
}).mouseout(function(e) {
$(this).removeClass('currentChild');
});
});
});
</script>
</head>
<body>
<div id="parent">
<div class="child">A</div><hr>
<div class="child">B</div><hr>
<div class="child">C</div><hr>
<div class="child">D</div><hr>
<div class="child">E</div><hr>
</div>
</body>
</html>
标签：javascript moveover moveout 悬停 div
原文地址：http://blog.csdn.net/sidongxue2/article/details/44779409
