CSS에서 마우스 다운 선택기는 무엇입니까?

114

버튼 및 기타 요소에는 기본 스타일이 있으며 일반보기, 호버 / 포커스보기 및 마우스 다운 / 클릭보기의 3 단계로 작동하는 것으로 나타났습니다. CSS에서 일반보기 및 호버보기의 스타일을 다음과 같이 변경할 수 있습니다.

button{
  background:#333;
  color:#FFF;
}

button:hover{
  background:#000;
  color:#EEE;
}

하지만 mousedown을 어떻게 선택할 수 있습니까? 나는 다음과 같은 것을 원한다.

button:mousedown{
  //some styling
}

감사

html css css-selectors

— 멀티미디어 xp
소스

1

stackoverflow.com/questions/2725458/css-on-mouse-down

— Xavier

@ x4vier : 그렇게 생각하지 않습니다. 다시 말하지만,이 경우 "마우스 다운"이 의미하는 바를 말하기가 어렵습니다.

— BoltClock

160

활성 상태를 의미한다고 생각합니다.

 button:active{
  //some styling
 }

다음은 CSS에서 링크가 가질 수있는 모든 의사 상태입니다.

a:link {color:#FF0000;}    /* unvisited link, same as regular 'a' */
a:hover {color:#FF00FF;}   /* mouse over link */
a:focus {color:#0000FF;}   /* link has focus */
a:active {color:#0000FF;}  /* selected link */
a:visited {color:#00FF00;} /* visited link */

참조 : http://www.w3.org/TR/selectors/#the-user-action-pseudo-classes-hover-act

— jansmolders86
소스

2

나는 링크를 원하지 않고 버튼이 필요합니다. 특히 모바일 장치에서 호버가 추한 결함을 만들기 때문입니다. 감사합니다

— multimediaxp

이 경우 버튼을 더 완벽하게 스타일링합니다. 테두리를 추가하여 : 0; 버튼 주변의 베젤과 문제가 있습니다.

— jansmolders86

@ jansmolders86 CSS에 이미지 또는 버튼에 대한 mouseover, mouseleave, mousedown, mouseup 선택기가 있는지 알고 있습니까?

— Ng2-Fun

@J. 재미는 아니지만, 오버 / 이탈시 : hover 상태를 사용하고 다운 / 업시 : active를 사용하여 원하는 효과를 얻을 수 있습니다. 그러나 자바 스크립트 없이는 둘을 구별 할 수 없습니다.

— jansmolders86 2011 년

50

나는 이것이 mousedown 이벤트처럼 작동한다는 것을 알아 냈습니다.

button:active:hover {}

— shawn98ag
소스

33

전문가 팁 참고 : 어떤 이유로 CSS 구문에는:active 조각 한 후:hover 효과적 일하기 위해 같은 요소를

http://www.w3schools.com/cssref/sel_active.asp

— woohooGuy
소스

2

CSS는 순서대로 평가되므로 의미가 있습니다. 요소는 :active이전 이 될 수 없습니다 :hover.

— InTheZone

2

또한 그것이 작동하려면 그 :active후에 :focus있어야합니다. 이것을 지적 해주셔서 감사합니다. 저는 왜 제 CSS가 효과가 없는지에 대해 머리를 긁적입니다!

— Michael

1

@InTheZone 물론 : hover'ed되기 전에 : active가 될 수 있습니다. 마우스 오버하지 않는 키보드로 활성화 할 수 있습니다.

— ANeves 2019-04-11

2

나는 최근 에 사용자 정의 CSS 라이브러리를 재정의 해야하는 :active:focus것처럼 CSS에서 동일한 작업 을 수행 한다는 사실을 발견했습니다 :active:hover. 둘 다 사용할 수 있습니다.

— Mees
소스