[jQuery] hover()
오늘은 jquery기능 중 hover에 대하여 정리해보고자 한다.
또한, mouseover, mouseout을 직접 사용했을 경우와 hover을 직접사용했었을 경우에 대하여 구분해보자.
1. hover()란
마우스 포인터가 mouseover와 mouseout시 두개의 핸들러를 bind한다.
1.parameter :
over:(Function) : 마우스 커서가 대상 element의 위로 올라간 경우 실행할 콜백함수
out:(Function) : 마우서 커서가 대상 element의 밖으로 나온 경우 실행할 콜백함수
2. return :
jQuery
3. description: 마우스 커서가 대상 element위로 올라갔을 경우 1번째 위치에 구현된 콜백함수(0ver)를 실행하고, 마우스 커서가 특정 element위에 빠져나온 경우 2번쨰 입력값 위치에 구현된 콜백함수(Out)를 실행한다.
= mouseover와 mouseout 이벤트가 합쳐진 형태
2. hover 사용법
1. $("element").hover(
function () {콜백함수},function () {콜백함수});
3. hover 예제
간단한 예제
어려운 예제
* CSS
<style>
a,body{
outline:none;
selector-dummy : expression(this.hideFocus=true);
text-decoration:none;
COLOR: black;
font-family:rixttf, rixeot;
}
.menu_bg{
position:absolute;
filter:alpha(opacity=60);
opacity:0.6;
background-color:#3f3838;
width: 205px;
height:60px;
z-index:100;top: 10px;
}
.menuText{
font-family:Rixeo,Rixtt;
font-size:14px;
color: red;
margin-top:6px;
font-weight:bold;
text-align:center;
line-height: 2em;
}
.menuBlank{
height:3px;
}
.subMenu{
background-color:black;
width:95%;
height:35px;
filter:alpha(opacity=10);
opacity:0.1;
-moz-opacity:0.1;
margin-left:5px;
}
.drop{
position:absolute;
width: 205px;
height:70px;
top: 15px;
z-index:110;
}
</style>
* jQuery
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1rc1.js"></script>
<script>
/*
* 마우스가 menu 밖으로 나갈시 menu 삭제 이벤트
*@author: HwajungSon
**/
$(".drop").live('hover',
function (e) {
if(e.type == "mouseleave"){
$(this).remove();
}
});
/* 하위 메뉴 생성하는 함수
*author: HwajungSon
**/
$(document).ready(function(){
makeSubMenu = function($obj,menuName){
var name= menuName.split("|");
$('.menu_bg').css("height",31*name.length+10);
div_str = "";
div_str+='<div class="drop">';
div_str += '<div class="menu_bg">';
for(var i=0;i<name.length;i++){
str = name[i].split("!");
div_str += '<div class="subMenu">';
div_str +=' <div class ="menuText" style="color:black"><a href="'+str[1]+'">' +str[0]+'</a></div>';
div_str +=' </div>';
div_str +='<div class ="menuBlank"/>';
}
div_str +='</div></div>';
$obj.after(div_str);
};
$("b").click(function(){
makeSubMenu($(this),"test01!http://www.naver.com|test02!http://www.daum.net");
});
});
</script>
<body>
<b>jquery hover test 페이지 입니다.</b>
</body>
해당 그림은 top_down방식으로 된 메뉴화면이다.
물론 plugin을 이용하면 간단하게 이용할 수 있지만, 필자는 간단하게 만들어보았다.
구동하는 순서는 다음과 같다.
1. button을 mouseover 했었을 시 div로 drop과 menu_bg,subMenu 가 생성된다.
근데 여기서 문제는 button을 mouseover을 했을때
jquery함수로 after메소드를 이용하여
아래 div를 생성해주었는데
mouseout할 때는 div가 여러곂으로 싸여져있어서
drop의 mouseout영역이 모호해 졌다는 것이다.
즉,
$(.drop).remove(); 를 해줄때 내부 menu_bg나 subMenu div로 들어가버리면 drop영역에서 out되었다 보고 remove 해버린다. 버튼을 mouseover하여 내부 subMenu를 클릭하려해도 마우스가 menu_bg쪽으로 내려가면 div가 사라져버리는 문제가 발생하였다.
해결방법: hover은 mouseover과 mouseout 범위가 다른 div가 곂쳐져도 영역에서 out 처리를 해주지 않는다.
$(".drop").live('hover',
function (e) {
if(e.type == "mouseleave"){
$(this).remove();
}
});
* 이슈사항:
hover을 사용했을 때 jquery api에 보면 function(),function()두개를 사용해서 mouseover, mouseout을 사용한다고 했다. 근데 첫번째 function에서 e.type으로 찍어서 확인했을 때 mouseenter과 mouseleave가 영역 안밖을 마우스가 움직일 때 발생하였다. 기존에 사용했던 hover과 사용방법도 다르고 의미도 달라 헷갈린다.
'컴퓨터 공부 > 자바스크립트' 카테고리의 다른 글
| [앵귤러] 앵귤러(Angular)js 수명주기 (0) | 2015.04.23 |
|---|---|
| [앵귤러] 앵귤러(Angular) JS 개념 및 예제 1 (5) | 2015.04.23 |
| [jquery] jquery manipulation [3] (요소를 추가하는메소드) (0) | 2013.01.16 |
| [jquery] jquery selectors [2] (:not, :hidden,[attribute=value], :selected, eq(index) ) (0) | 2013.01.16 |
| [jquery] jquery selectors [1] ( $("") ,$("#"), $(".") ) (0) | 2012.10.09 |