2012-10-31 5 views
0

나는 내 div를 열려면 onmouseover 이벤트에 클릭 이벤트를 변경하고 드롭 다운 메뉴처럼 마우스를 다시 내 div 숨겨져 간다면 아무도 나를 도와 줄 수 있습니다.클릭 전환 onmouseover 자바 스크립트

HTML 코드 :

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Papermashup.com | Sliding Div</title> 
<script src="jquery.js" type="text/javascript"></script> 
<script src="dropdown/drop.js" type="text/javascript"></script> 
<link type="text/css" href="dropdown/drop.css" rel="stylesheet"/> 

</head> 

<body> 
<a href="#" class="show_hide" onmouseover="this.#" >Show/hide</a><br /> 
    <div class="slidingDiv" style="width:103px;height:60px;"> 
     <img alt="" height="80" src="images/dropdown.png" width="103"> 
    </div> 
</body> 
</html> 

CSS 코드 :

.show_hide { 
    display:none; 
} 

자바 스크립트 코드 :

$(document).ready(function() { 

    $(".slidingDiv").hide(); 
    $(".show_hide").show(); 

    $('.show_hide').click(function() { 
     $(".slidingDiv").slideToggle(); 
    }); 

}); 
+1

무엇이 'onmouseover' 이벤트를'onclick '으로 바꾸는 걸 멈 춥니 까? – Andy

+0

@Mohamamdreza : 왜 onclick을 직접 사용할 수 없습니까? 그다지 좋지 않으면 event.initMouseEvent()를 사용하여 마우스 오버 대신 클릭 이벤트를 시뮬레이트 할 수 있습니다. – karthick

+0

실제로 이것으로 드롭 다운 메뉴를 만들고 싶습니다. 그래서 마우스가 제 버튼 위로 갈 때 div를 보여주고 싶습니다. 마우스가 왼쪽으로 갈 때 div를 숨기고 싶습니다. –

답변

2

시도

$(".show_hide").mouseenter(function() { 
     $(".slidingDiv").slideToggle(); 
    }) 
+0

감사합니다, 젠장, 거기에 마우스 왼쪽 div 경우 다시 숨기기가 어떤 해결책이 있습니까? –

+0

오, 알아, 고맙습니다. –

+0

@MohamamdrezaSiahpoosh 매우 환영합니다 –

0

클릭 바인딩 대신 mouseover 바인딩을 사용하십시오.

$('.show_hide').mouseover(function(){ 
    $(".slidingDiv").slideToggle(); 
}).mouseout(function(){ 
    $(this).slideToggle(); 
}); 
+0

감사합니다, 젠장, 마우스 왼쪽 div가 다시 숨어있는 경우 어떤 해결책이 있습니까? 나는 드롭 다운 메뉴와 같은 것을 만들고 싶다. –

+0

오, 알았어, 고맙다. –

+0

나는 내 대답을 편집하여 [mouseout] (http://api.jquery.com/mouseout/) 바인딩을 보여 주었다. –