CSS 롤오버를 수행하는 가장 좋은 방법은 무엇입니까?

HTML에서 롤오버 효과를 설정할 때 CSS 대 JavaScript에서 어떤 효과 (또는 함정)가 있습니까? 두 가지 방법 중 하나라도 알고 있어야하는 성능 또는 코드 유지 관리 문제가 있습니까?CSS 롤오버를 수행하는 가장 좋은 방법은 무엇입니까?

출처

2008-10-06 Jason Z

CSS는 롤오버에 적합합니다. 기본적으로 의사 선택기 :hover을 사용하여 구현됩니다.

IE6는
이미지에 사용하는 CSS에 지정하지만 :hover<a>에 태그를 지원 : 당신이 생각 알아야 할 몇 가지가 있습니다
```
a{ 
    background-image: url(non-hovered-state.png); 
} 
a:hover{ 
    background-image: url(hovered-state.png); 
} 
```
: 여기 정말 간단한 구현입니다 페이지가 즉시로드되지 않습니다 (롤오버 상태가 처음 나타날 때까지 잠시 걸릴 수 있음을 의미)

<a> 태그 만 제한은 일반적으로 롤오버를 클릭 할 수 있기 때문에 문제가되지 않습니다. 그러나 후자는 좀 더 문제가됩니다. 이 문제를 방지 할 수있는 CSS Sprites이라는 기술이 있습니다. 사용중인 기술의 예를 찾아 no-preload rollovers으로 만들 수 있습니다.

꽤 간단합니다. 핵심 원리는 요소보다 큰 이미지를 만들고 이미지를 배경 이미지로 설정하고 background-position을 사용하여 위치를 지정하므로 원하는 비트 만 표시됩니다. 즉, 마우스를 올린 상태를 표시하려면 백그라운드의 위치를 변경하면됩니다. 추가 파일을 전혀로드 할 필요가 없습니다. 여기에 빠르고 예가 있습니다 (이 예에서는 20px 높이의 요소가 있고, 겹쳐서 표시되거나 숨겨지지 않은 상태를 모두 포함하는 배경 이미지가 있다고 가정합니다 (이미지가 40px이므로).

이 '스프라이트'기술을 사용하는 당신은 IE6 렌더링 할 수있는 유일한 방법으로 (IE6와 알파 투명 PNG 파일을 사용 할 수 없습니다 것을 의미

a{ 
    background-image: url(rollover-sprites.png); 
    background-position: 0 0; /* Added for clarity */ 
    height: 20px; 
} 
a:hover{ 
    background-position: 0 -20px; /* move the image up 20px to show the hovered state below */ 
}

참고 알파 투명 PNG 파일이 제대로 특수 이미지 필터 돈을 '사용 t support background-position)

출처

2008-10-06 17:55:14 Dan

doctype을 지정하여 IE6의 모든 요소에서 작동하도록': hover' 가상 클라스를 얻을 수 있습니다. –

기술적으로 background position은'0 ~ 20px'가 적당하다고 생각 합니다만, background-repeat은 no-repeat으로 설정되어 있지 않으므로 상관 없습니다. –

@jdp : 당신이 내 친구가 맞는지 확신 할 수 없습니다. IE6은 모든 지원 만 있습니다 : 해킹없이 (호각없이) 태그에 있습니다. 그러나, 나는 틀린 입증 된 기꺼이보다는 좀더이다.보기를 얻었 는가? – Dan

나는 집의 CSS쪽에 머물 렀지 만 자바 스크립트는 거의 작성하지 않았다.

CSS는 Javascript보다 브라우저에서 표준화하기가 쉽지만 Chrome의 V8 및 Firefox의 새로운 렌더링 도구의 등장으로 변경 될 수 있습니다.

출처

2008-10-06 17:49:04 warren

프레젠테이션의 한면이기 때문에 CSS를 사용하는 것이 더 많은 표준이라고 말할 수 있습니다. CSS로 할 수 없었기 때문에 Javascript를 사용 했었습니다. (예전의 브라우저는 짜증이났습니다. 나는 생각하지 않습니다 : CSS 2까지 hover도 추가되었습니다).

출처

2008-10-06 17:52:06

브라우저에서 Javascript가 비활성화 된 경우 CSS에서 계속 작동합니다.

출처

2008-10-06 17:54:06

CSS를 사용하여 롤오버를 구현하면 : 호버 가상 클래스를 사용하여 대상 요소를 가리키면 스타일을 정의합니다. 이것은 많은 브라우저에서 효과적이지만 IE6에서는 앵커 태그 (예 : 호버)에서만 잘 작동합니다. 탭 탐색 모음을 구현하기 위해 CSS 호버를 사용했지만 IE6에서 IE 비헤이비어를 사용해야했습니다.

출처

2008-10-06 17:55:14

CSS에서 선언 순서를 기억하기위한 니모닉이 없습니까?

출처

2008-10-06 18:14:31

그래, 가장 좋은 방법은 css sprites입니다.짜증나는 문제는 IE6에서 발생합니다. IE6에서는 요소가 맴돌 때마다 브라우저가 요청을합니다. 이 문제를 해결하려면 take a look here

출처

2008-10-06 20:07:52