��4�́@�u�}�E�X�I�[�o�[�^�A�E�g�^�z�o�[�̏����v

jQuery�̃C�x���g�����̓C�x���g�����A���̂܂܃��\�b�h���ɂȂ��Ă��܂��B�}�E�X�I�[�o�[�^�A�E�g�����l��mouseover()�Amouseout()�ƂȂ�܂��B��������p�����[�^�ɃC�x���g�������ɏ����������֐����w�肵�܂��B�C�x���g�����������ꍇ�A�֐����ł�this���g���ăC�x���g�����������G�������g���Q�Ƃ��邱�Ƃ��ł��܂��B
�T���v��1�ł̓}�E�X�I�[�o�[���ɔw�i�F�����F�ɁA�}�E�X�A�E�g���ɃG�������g�̔w�i�F�𔒐F�ɐݒ肵�Ă��܂��B�i�T���v��1�����s�����j

�yHTML�z
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQuery�T���v��</h1>
<p>�C�x���g�̏���</p>
<div>[1] �������N���b�N</div>
<div>[2] �������N���b�N</div>
<div>[3] �������N���b�N</div>
</body>
</html>


�yCSS�z
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}


�yJavaScript�z
$(function(){
$("div").mouseover(function(){
this.style.backgroundColor = "yellow";
});
$("div").mouseout(function(){
this.style.backgroundColor = "white";
});
});


�}�E�X�I�[�o�[�^�A�E�g�ɂ��•ʏ����ł͂Ȃ��A�G�������g��Ƀ}�E�X���d�Ȃ����^���ꂽ�ۂɎ����I�ɏ������s�Ȃ�郁�\�b�h��jQuery�ɂ͗p�ӂ���Ă��܂��B�X�^�C���V�[�g�ł�hover�^���v���p�e�B���Y�����܂����A���l�̃��\�b�h��jQuery�ɂ��p�ӂ���Ă��܂��Bhover()�ɂ�2�‚̃p�����[�^���K�v�ł��B�ǂ���̃p�����[�^���C�x���g�������Ɏ��s����֐����w�肵�܂��B�ŏ��̃p�����[�^���}�E�X���G�������g��ɏd�Ȃ����ꍇ�ɏ���������́A2�Ԗڂ��G�������g����}�E�X�����ꂽ�ꍇ�ɏ�������֐��ɂȂ�܂��B
�T���v��2�ł̓}�E�X�I�[�o�[���ɃG�������g�̔w�i�F�����F�A�}�E�X�A�E�g���ɂ͔w�i�F�𔒐F�ɂ��܂��B�i�T���v��2�����s�����j

�yHTML�z
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQuery�T���v��</h1>
<p>�C�x���g�̏���</p>
<div>[1] �������N���b�N</div>
<div>[2] �������N���b�N</div>
<div>[3] �������N���b�N</div>
</body>
</html>


�yCSS�z
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}


�yJavaScript�z
$(function(){
$("div").hover(
function(){
this.style.backgroundColor = "yellow";
},
function(){
this.style.backgroundColor = "white";
}
);
});

[�ڎ���]