2011-10-27 4 views
1

나는 3 단계 (정상, 마우스 오버, 활성) 인 이미지 버튼 롤오버를하고 있습니다. 정상 및 호버 스테이지가 작동하지만 '활성'상태로 작동하지 않는 것처럼 보입니다. 즉, 이미지를 클릭 한 후에 이미지를 활성 레버에 유지하겠습니다. 여기클릭 후 이미지 롤오버 (활성)

내가 무엇을 가지고 : http://jsfiddle.net/pufamuf/Q3YpU/1/

감사합니다! :)) 클릭 이벤트 자바 스크립트를 필요로 할 노력하고 무엇

답변

2

+0

고마워요, 그게 효과가있어 :) – pufAmuf

1

사용 jQuery를 addClass. CSS는 정상적으로 작동하지만 링크가 더 이상 활성화되어 있지 않으면 :active 셀렉터가 더 이상 적용되지 않으며 그에 대한 조치는별로 없습니다.

추가 CSS 클래스를 태그에 추가하여 클릭 이벤트에 응답하는 자바 스크립트를 사용할 수 있으며 해당 클래스를 사용하여 :active 링크와 똑같이 스타일을 지정할 수 있습니다. 당신의 JS는 "클릭"클래스를 추가하는 경우 예를 들어, 규칙은 아마 이런 일을 위해 jQuery를 사용하는 것이

#emailUs:active, #emailUs.clicked 
{ 
    background-position: 0 -62px; 
} 

많은 (대부분?) 개발자처럼 보일 수 있습니다.

1

JavaScript를 사용할 수 있다면 간단 할 것입니다. 일부 클래스 이름 (예를 들어, active)와 함께 가자,하고 :active 선언에 추가 :

#emailUs:active, .active 
{ 
    background-position: 0 -62px; 
} 

그런 다음, 해당 링크에 click 이벤트를 수신 기본 동작을 방지하고, 추가 자바 스크립트를 사용 /를 제거 active 클래스를 필요에 따라 요소에서 가져옵니다.

그러나 JavaScript가 이 아닌 경우이 허용되면 원하는 것을 얻을 수있는 훨씬 난잡한 방법이 있습니다. 이는 실제로 라이브 사이트에서 가능하지 않습니다.

변경 링크의 href는 그래서 그 자체를 가리키는 : 두 번째 솔루션 가서 몇 가지주의를 가지고

#emailUs:active, #emailUs:target 
{ 
    background-position: 0 -62px; 
} 

유의 사항 :

<a id="emailUs" href="#emailUs" title="Email Us"></a> 

이 그런 다음 CSS의 :target 선택기를 사용 with :

  1. 링크가 표시되도록 페이지 위치를 변경하려고합니다. 활성 : 이미 사이트에 조각 식별자를 사용하는 경우 문제의 무리가있을 수 있습니다
  2. 화면의 상단은
  3. 이 IE6-8
+0

고마워요. sdleihssirhc :)) – pufAmuf

2

에서 전혀 작동하지 않습니다 의사 클래스는 요소가 활성화되는 과정에있는 동안에 만 적용됩니다. 마우스 클릭이 해제되면 요소는 더 이상 활성 카테고리 아래에 있지 않습니다.

예상되는 동작을 생성하려면 일부 자바 스크립트를 사용해야합니다.

관련 문제