JQuery와 마우스 오버 buttonset는 마우스 오버 이벤트가 (확인 클릭 이벤트 화재) 다음 코드에서 발사하지와

나는 데 문제가 작동하지 않습니다 :JQuery와 마우스 오버 buttonset는 마우스 오버 이벤트가 (확인 클릭 이벤트 화재) 다음 코드에서 발사하지와

가 마우스 오버 이벤트가 전혀 무시

<!doctype html> 

<html lang="en"> 
    <head> 
    <meta charset="utf-8" /> 
    <title>Test</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
    <style type="text/css"> 
    <!-- 
     body { 
     font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; 
     font-size: 62.5%; 
     } 
     .ui-menu { width: 150px; } 
     .invisible { 
     display: none; 
     } 
    //--> 
    </style> 
    <script> 
    $(function() { 
     $("#radio").buttonset(); 
     $('.menu').menu(); 
     $('#radio1').mouseover(function(){ 
     $('#menu1').removeClass('invisible'); 
     }); 
     $('#radio1').click(function(){ 
     $('#menu1').removeClass('invisible'); 
     }); 
    }); 
    </script> 
    </head> 
    <body> 
    <form> 
     <div id="radio"> 
     <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label> 
     <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label> 
     <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label> 
     </div> 
    </form> 

    <ul id="menu1" class="menu invisible"> 
     <li><a href="#">Uno</a></li> 
     <li><a>Dos</a></li> 
     <li><a>Tres</a></li> 
    </ul> 
    </body> 
</html>

(이 참조 예 : http://jsfiddle.net/YyCde/) 및 클릭 이벤트가 예상대로 작동합니다. 예상되는 동작입니까, 버그가 있거나 뭔가 빠졌습니까? 귀하의 도움에 미리 감사드립니다.

출처

2013-04-17 Marco Muciño

브라우저 속성 또는 FireBug에서 DOM을 검사하면 라디오 버튼이 스패닝되지 않기 때문입니다. 대신 label이 버튼의 역할을합니다. 따라서 mouseover은 radio에 발사되지 않습니다. 이 시도 :

$('#radio1').next('label').on('mouseover', function(e){ 
    $('#menu1').removeClass('invisible'); 
});

UPDATE :

을 의미가 있습니다 mu is too short

$('label[for="radio1"]').on('mouseover', function(e){ 
    $('#menu1').removeClass('invisible'); 
});

에 의해 제안. FIDDLE.

출처

2013-04-17 04:10:50

나는'.next' 물건 위에'label [for = radio1]'을 달았습니다. –

예! 그 필터가 존재한다는 것을 몰랐습니다! ;) –

와우, 이건 내게 새 것이니, 고마워. –

JQuery와 마우스 오버 buttonset는 마우스 오버 이벤트가 (확인 클릭 이벤트 화재) 다음 코드에서 발사하지와

답변

관련 문제