Jquery - 부모를 표시하면서 하위 호버에있는 요소 숨기기

Question

테이블 행을 가져갈 때 옵션이있는 버튼을 보여주는 표가 있습니다. 특정 열을 마우스로 가리키면 버튼을 숨기고 싶습니다 (정확히, 표 셀이 정확하게 표시되도록).

은 지금 나는이 같은 것을 만들려고 노력 해요 :

$('.f-t-row').on('hover', function(e){ 
     if(e.target.hasClass('block-checkbox')){ 
      if (e.type == "mouseenter") { 
       $('.f-t-row').find('.table-ghost-buttons').hide(); 
      } 
      else { // mouseleave 
       $(this).find('.table-ghost-buttons').show(); 
      } 
     } 
     else { 
      if (e.type == "mouseenter") { 
       $(this).find('.table-ghost-buttons').show(); 
      } 
      else { // mouseleave 
       $('.f-t-row').find('.table-ghost-buttons').hide(); 
      } 
     }  
    }); 

을하지만 그런 이벤트 대상 클래스를 확인할 수 없습니다 때문에, 문제가 무엇인지 알 수 :

if(e.target.hasClass('block-checkbox')) 

을

콘솔은 항상 이런 식으로 뭔가를 기록합니다

개체 번호가있는 방법 'hasClass'

이 없습니다

당신은 여기에서 볼 수 있습니다 http://jsfiddle.net/57aQP/

해당 오류를 수정하고 이벤트 대상 (마우스 마우스 오버)가 특정 클래스를 가지고 있는지 확인하기 위해 가능한 방법은 무엇입니까?

Answer 1

e.target은 jQuery 객체가 아니기 때문에 $(e.target)처럼 구현해야하지만 $(this)과 같습니다.

코드 :

$('.f-t-row').on('hover', function (e) { 
    if ($(e.target).hasClass('block-checkbox')) { 
     if (e.type == "mouseenter") { 
      $('.f-t-row').find('.table-ghost-buttons').hide(); 
     } else { // mouseleave 
      $(this).find('.table-ghost-buttons').show(); 
     } 
    } else { 
     if (e.type == "mouseenter") { 
      $(this).find('.table-ghost-buttons').show(); 
     } else { // mouseleave 
      $('.f-t-row').find('.table-ghost-buttons').hide(); 
     } 
    } 
}); 

데모 : http://jsfiddle.net/IrvinDominin/57aQP/1/