CSS/JQuery : 행에서 메뉴로 눈에 띄는 마우스 위치를 유지하는 테이블 행에 대한 하위 메뉴를 만드는 방법은 무엇입니까?

Question

저는 CSS/JQuery 신참이지만 기본 사항을 몇 가지 만들었습니다. 그냥 일반적인 방향이 필요합니다.

필자는 HTML 테이블 (이 상황에서 표 형식의 데이터를 사용하는 테이블을 사용해야 함)이 있어야하며 행을 가져갈 때 다음과 같이해야합니다. 1) 행 주위에 선을 그어 강조 표시하고 2) 내가 가리키고있는 셀의 바닥에 작은 드롭 다운 메뉴를 연결합니다.

내 질문은 : 메뉴가 행 위로 마우스를 올렸을 때 트리거되지만 메뉴 위로 마우스를 가져 가면 메뉴를 마우스로 가리기 전까지 행을 강조 표시하고 메뉴를 활성화하는 방법은 무엇입니까? 난 행을 강조 표시하고 메뉴 자체가 사라질 때 행을 털어 놓을 것이라고 가정합니다.

내 인생에서 나는 이것의 예를 찾을 수 없다.

Answer 1

tr 이벤트에서 mouseenter 이벤트의 행을 "강조 표시된"클래스에 할당하고 메뉴를 표시하십시오.

메뉴의 mouseleave 이벤트에서 메뉴를 숨기고 해당 메뉴가있는 행에서 "강조 표시된"클래스를 제거하십시오. 같은

뭔가 :

var $myMenu = $('#myMenu'); 

$('tr').mouseenter(function(){ 
    $this = $(this); 
    $this.addClass('highlighted'); 
    $myMenu.appendTo($this).slideDown(); 
}); 

$myMenu.mouseleave(function(){ 
    $(this).slideUp(); 
    $('tr.highlighted').removeClass('highlighted'); 
}); 

Answer 2

아래 this one 좋아하지만 셀에서 간단한 드롭을 시도합니다. 하이라이트의 경우 셀의 동일한 색상으로 테두리를 지정한 다음 마우스를 가져 가면 테두리 색상을 변경합니다.