ID없이 특정 인스턴스 변경

Question

좋아, 페이지에 여러 링크가 있고 페이지를 넘길 때 링크가 배경색을 변경한다고 가정 해 봅시다. 이 코드를 사용합니다 :

$(function() { 
    $('a').mouseover(function() { 
     $('a').css('background-color', 'black'); 
    }); 
}); 
$(function() { 
    $('a').mouseleave(function() { 
     $('a').css('background-color', 'white'); 
    }); 
}); 

이 코드의 문제는 하나 위에 마우스를 할 때, 링크의 모든 색상을 변경할 수 있다는 것입니다. 각자에게 특정 ID를 부여하고 각각에 대해 특정 기능을 만들 수 있지만 더 효율적인 방법이 있습니까? 편집 : 또한 원래 배경색을 이전대로 되돌릴 수있는 방법은 무엇입니까? 배경을 흰색으로 되돌려 놓으면, 처음에는 흰색이 아닐 수도 있습니다. 어떻게 해결할 수 있을까요?

Answer 1

당신도 알다시피, 당신은 모두 길고 어려운 길을 가고 있습니다. ALSO

// this is like document.onload = function, 
// this only needs to be called once, you can put 
// all your jQuery in this one function 
$(function() { 
    // the following is a call to all `a` links to add jQuery's own .hover function 
    // see -> http://api.jquery.com/hover/ 
    $("a").hover(function(eIn) { // this first function is the action taken when 
           // user hovers over the link 
     $(this).css({ 'background-color': '#000', 'color': '#fff' }); 
    }, function(eOut) { // this second function is what happens 
         // when user hover away from the link 
     $(this).css({ 'background-color': '', 'color': '' }); 
    }); 
}); 

​See WORKING Fiddle

, 당신은 CSS에서

CSS를 사용하고, 이것에 대한 jQuery를 필요 없어요이 들어

a:hover { 
    background-color: #000; 
    color: #fff; 
}​ 

See it in CSS ONLY HERE

Answer 2

$('a')을 사용하면 .css() 기능을 호출 할 수 있습니다. 문제는 $('a')이 마우스를 움직였을뿐만 아니라 페이지의 모든 노드를 선택한다는 것입니다. mouseover 콜백 함수 내에서 this 키워드는 이벤트의 시작자인 노드를 참조합니다. 그래서 그 함수 내에서 $(this)을 수행하면 해당 노드의 jQuery 오브젝트 (랩핑 된 세트라고 함)가 작성됩니다. 이제 .css() 함수를 제외한 모든 jquery 함수를 호출 할 수 있습니다. 그래서 여기에 당신이 간다 :

$(function() { 
    $('a').mouseover(function() { 
     $(this).css('background-color', 'black'); 
    }); 
}); 
$(function() { 
    $('a').mouseleave(function() { 
     $(this).css('background-color', 'white'); 
    }); 
});