jQuery 선택기에서 css : hover 상태를 정의하는 방법은 무엇입니까?

jQuery 선택기에서 css : hover 상태를 정의하는 방법은 무엇입니까?

---

jQuery를 사용하여 : hover에 div의 배경색을 정의해야하지만 다음은 작동하지 않는 것 같습니다.

$(".myclass:hover div").css("background-color","red");

동일한 결과를 얻으려면 어떻게해야합니까? jQuery로 수행해야하지만 어떤 이유로 작동하지 않는 것이 중요합니다. 어떤 제안? 감사!

---

가능한 경우 jquery보다 CSS를 사용하는 것이 좋습니다. 그렇지 않으면 다음과 같이 사용할 수 있습니다.

$("div.myclass").hover(function() {
  $(this).css("background-color","red")
});

필요에 따라 선택기를 변경할 수 있습니다.

@ A.Wolff의 설명대로,이 호버 효과를 여러 클래스에 사용하려면 다음과 같이 사용할 수 있습니다.

$(".myclass, .myclass2").hover(function(e) { 
    $(this).css("background-color",e.type === "mouseenter"?"red":"transparent") 
})

Js Fiddle 데모

---

이것을 시도 할 수 있습니다.

$(".myclass").mouseover(function() {
    $(this).find(" > div").css("background-color","red");
}).mouseout(function() {
    $(this).find(" > div").css("background-color","transparent");
});

DEMO

---

글쎄, 당신은 같은 의사 선택기를 사용하여 스타일을 추가 할 수 없습니다 :hover, :after, :nth-child, 그 사용하여 jQuery를 같은 또는 아무것도.

이와 같은 CSS 규칙을 추가하려면 CSS 에서처럼 <style>요소를 만들고 해당 :hover규칙을 추가해야 합니다. 그런 다음 해당 <style>요소를 페이지 에 추가해야 합니다.

.hoverCSS를 스타일 시트에 추가 할 수없는 경우 함수를 사용하는 것이 더 적절 해 보이지만 고집하면 다음과 같이 할 수 있습니다.

$('head').append('<style>.myclass:hover div {background-color : red;}</style>')

자바 스크립트로 CSS를 추가하는 방법에 대해 자세히 알아 보려면 David Walsh의 블로그 게시물 중 하나를 확인하세요 .

---

나는 이것이 받아 들여지는 대답을 알고 있지만 누군가가 이것에 대해 오면 내 솔루션이 도움이 될 수 있습니다.

요소에 대한 : hover 상태를 개별적으로 끄고 싶은 유스 케이스가 있기 때문에이 질문을 찾았습니다. DOM에서이 작업을 수행 할 수있는 방법이 없기 때문에이를 수행하는 또 다른 좋은 방법은 hover 상태를 재정의하는 CSS에서 클래스를 정의하는 것입니다.

예를 들어 css :

.nohover:hover {
    color: black !important;
}

그런 다음 jQuery를 사용합니다.

$("#elm").addClass("nohover");

이 메서드를 사용하면 수많은 onHover 이벤트를 바인딩하지 않고도 원하는만큼 DOM 요소를 재정의 할 수 있습니다.

---

JQuery Hover를 사용 하여 Hover에서 클래스 또는 스타일을 추가 / 제거합니다.

$( "mah div" ).hover(
  function() {
    $( this ).css("background-color","red");
  }, function() {
    $( this ).css("background-color",""); //to remove property set it to ''
  }
);

---

너무 늦었지만 가장 좋은 예는 jQuery 스타일에서 의사 요소를 추가하는 방법입니다.

 $(document).ready(function(){
 $("a.dummy").css({"background":"#003d79","color":"#fff","padding": "5px 10px","border-radius": "3px","text-decoration":"none"});
 $("a.dummy").hover(function() {
            $(this).css("background-color","#0670c9")
          }).mouseout(function(){
              $(this).css({"background-color":"#003d79",});
          });
 
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<a class="dummy" href="javascript:void()">Just Link</a>

참고 URL : https://stackoverflow.com/questions/21051440/how-to-define-the-css-hover-state-in-a-jquery-selector