메뉴 건너뛰기

검색창 닫기

HEUKMYO

program1

140813_[jquery] hover

2014.09.23 22:37 read.155

.hover();
.hover(function(){},function(){});
첫번째 function은 마우스가 오버 되었을때, 두번째 function은 마우스가 아웃 되었을때 사용


예제2

jq_mouseover_3.gif 


<!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" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title> new document </title>
<style type="text/css">
*{margin:0;padding:0;}
span{display: inline-block;margin-left:15px;width:100px;height:50px;background:pink;text-align: center;line-height:50px;cursor:pointer;}
div{margin:15px 0 0 15px}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('span').eq(0).hover(function(){//마우스가 올라갔을때
$('div img').attr("src","images/img_01.jpg");
},function(){//마우스가 떠났을때
$('div img').attr("src","")
});//함수를 두개 사용할수 있다.
$('span').eq(1).hover(function(){//마우스가 올라갔을때
$('div img').attr("src","images/img_03.jpg");
},function(){//마우스가 떠났을때
$('div img').attr("src","")
});
});
//]]>
</script>
</head>
<body>
<p><span>남</span><span>여</span></p>
<div><img src="" alt="" /></div>
</body>
</html>

추가메뉴 목록
위로