CSS hover vs. JavaScript mouseover [닫힘]

페이지에서 html 요소의 모양을 제어하기 위해 CSS 요소 (hover 또는 JavaScript onmouseover) 중 하나를 선택할 수있는 경우가 있습니다. div가 입력을 래핑하는 다음 시나리오를 고려하십시오.

<div>
<input id="input">
</div>

마우스 커서를 div 위로 가져갈 때 입력이 배경색을 변경하기를 원합니다. CSS 접근 방식은

<style>
  input {background-color:White;}
  div:hover input {background-color:Blue;}
</style>

<div><input></div>

JavaScript 접근 방식은

<div onmouseover="document.getElementById('input').style.backgroundColor='Blue';">
  <input id="input">
</div>

각 접근 방식의 장점과 단점은 무엇입니까? CSS 접근 방식이 대부분의 웹 브라우저에서 잘 작동합니까? JavaScript가 CSS보다 느립니까?

: hover의 문제는 IE6가 링크에서만 지원한다는 것입니다. 요즘에는 이런 종류의 jQuery를 사용합니다.

$("div input").hover(function() {
  $(this).addClass("blue");
}, function() {
  $(this).removeClass("blue");
});

일을 훨씬 쉽게 만듭니다. IE6, FF, Chrome 및 Safari에서 작동합니다.

CSS 하나는 유지 관리가 훨씬 쉽고 읽기 쉽습니다.

왜 모두? 애니메이션 효과에 jQuery를 사용하고 대체로 CSS를 사용하십시오. 이것은 단계적 저하 로 jQuery의 이점을 제공합니다 .

CSS :

a {color: blue;}
a:hover {color: red;}

jQuery ( jQueryUI 를 사용하여 색상에 애니메이션 적용) :

$('a').hover( 
  function() {
    $(this)
      .css('color','blue')
      .animate({'color': 'red'}, 400);
  },
  function() {
    $(this)
      .animate({'color': 'blue'}, 400);
  }
);

데모

자바 스크립트에서 수행하는 또 다른 이점은 다른 시점에서 호버 효과를 추가 / 제거 할 수 있다는 것입니다.

매우 큰 차이점은 마우스가 요소 밖으로 이동하면 ": hover"상태가 자동으로 비활성화된다는 것입니다. 결과적으로 마우스 오버시 적용된 모든 스타일은 자동으로 반전됩니다. 반면에 자바 스크립트 접근 방식을 사용하면 "onmouseover"및 "onmouseout"이벤트를 모두 정의해야합니다. "onmouseover"만 정의하는 경우 "onmouseout"을 명시 적으로 정의하지 않는 한 "onmouseover"에 적용된 스타일은 마우스를 놓은 후에도 유지됩니다.

편집 :이 대답은 더 이상 사실이 아닙니다. CSS가 잘 지원되고 자바 스크립트 (읽기 : JScript)는 이제 모든 웹 경험에 거의 필요하며 자바 스크립트를 비활성화하는 사람은 거의 없습니다.

2009 년 제 의견으로는 원래 답변입니다.

내 머리 위로 :

CSS를 사용하면 브라우저 지원에 문제가있을 수 있습니다.

JScript를 사용하면 사람들이 jscript를 비활성화 할 수 있습니다.

선호하는 방법은 HTML, CSS를 사용한 레이아웃 및 JScript에서 동적으로 콘텐츠를 수행하는 것입니다. 따라서이 경우 CSS 접근 방식을 사용하고 싶을 것입니다.

둘 사이에 명심해야 할 또 다른 차이점이 있습니다. CSS를 사용 하면 마우스가 요소에서 벗어날 때 항상:hover 상태가 비활성화됩니다. 그러나 JavaScript를 사용 하면 마우스가 페이지의 나머지 부분이 아닌 브라우저 크롬으로 요소를 이동할 때 이벤트가 시작되지 않습니다.onmouseout

이것은 생각보다 더 자주 발생하며, 특히 사용자 정의 호버 상태로 페이지 상단에 탐색 모음을 만들 때 발생합니다.

Internet Explorer에서 : hover 선택기가 <a> 요소가 아닌 다른 요소에서 작동하려면 <! DOCTYPE>을 선언해야합니다.

CSS를 사용하면 스타일 자체를 훨씬 쉽게 관리 할 수 ​​있습니다.

jQuery 를 사용하여 hover를 수행 하는 것에 대한 reguards 에서 나는 항상 HoverIntent 플러그인을 사용합니다. 잠시 동안 요소 위에 일시 중지 할 때까지 이벤트를 발생시키지 않기 때문에 실수로 실행하는 경우 많은 마우스 오버 이벤트가 발생하지 않습니다. 그들 위에 마우스를 올려 놓거나 단순히 옵션을 선택하는 동안.

자바 스크립트가 비활성화 된 IE6에 대한 100 % 지원이 필요하지 않은 경우 IE 조건부 주석과 함께 ie7-js 와 같은 것을 사용할 수 있습니다 . 그런 다음 css 규칙을 사용하여 호버 효과를 적용합니다. 나는 그것이 어떻게 작동하는지 정확히 모르지만 자바 스크립트를 사용하여 IE7 및 8에서 정상적으로 작동하지 않는 많은 CSS 규칙을 작동시킵니다.