호출 .CSS() 함수는

Question

그래서 나는이 호버 코드가 마우스를 비활성화합니다

function shortHover(elem){ 
    $('body').delegate(elem, 'hover', 
      function() { 
       $(this).css("background-color", "#f0c723;") 
      }, 

      function(){ 
       $(this).css("background-color", "#00ed00;") 
      } 
    ) 
    } 

    shortHover("#for_width_my_added"); 
    shortHover("#for_width_my_published"); 
    shortHover("#for_width_my_unpublished"); 

그리고보다 이러한 요소 중 하나를 클릭에 :에 할당 된 요소를 통해 클릭에 따라서

$("#for_width_my_added").css("background-color", "#00ed00"); 
$("#for_width_my_published").css("background-color", "#00ed00"); 
$("#for_width_my_unpublished").css("background-color", "#00ed00"); 
$("#for_width_<%= @output[0] %>").css("background-color", "#f0c723"); 

녹색, 그리고 현재 클릭 - 호버의 색상, 그래서 한 요소가 영원히 이러한 색상을 가질 수 있습니다.

문제는 요소 위로 클릭 한 후 마우스 오버시 반응이 멈췄습니다. 델리게이트를 사용했지만. 왜?

Answer 1

문제는 jQuery의 hover은 실제 JavaScript 이벤트가 아니며 단지 $(selector).mouseenter(handlerIn).mouseleave(handlerOut);의 jQuery 이벤트 또는 단축형입니다.

function shortHover(elem) { 
    $('body').delegate(elem, 'mouseover mouseout', 
    function (e) { 
     if (e.type == 'mouseover') { 
      $(this).css("background-color", "#f0c723"); 
     } else if (e.type == 'mouseout') { 
      $(this).css("background-color", "#00ed00"); 
     } 
    }); 
} 

shortHover("#for_width_my_added"); 
shortHover("#for_width_my_published"); 
shortHover("#for_width_my_unpublished"); 

$("#for_width_my_added").css("background-color", "#00ed00"); 
$("#for_width_my_published").css("background-color", "#00ed00"); 
$("#for_width_my_unpublished").css("background-color", "#00ed00"); 
$("#for_width_<%= @output[0] %>").css("background-color", "#f0c723"); 

을 그리고 여기가 당신이 jQuery를의 이전 버전을 사용하지 않는 jsFiddle

, 당신은 .delegate()를 사용하지만이 .delegate()을 대체했다로 대신 .on()을 사용하지 않아야합니다 : 당신은 대신 사용할 수 있습니다.