클릭 시 지속적인 버튼 스타일 변경을 달성하는 방법은 무엇입니까?

누른 버튼 선택기

문제:

수정하고 싶은 시나리오가 발생했습니다. 눈에 띄는 시각적 피드백을 생성하기 위해 눌렀을 때 버튼의 모양. :active 의사 클래스를 사용하려고 시도했지만 버튼을 길게 클릭할 때만 스타일 변경이 발생합니다.

답변:

:active를 사용하는 동안 의사 클래스는 적합한 옵션처럼 보일 수 있으며, 요소를 적극적으로 누르는 동안 요소의 스타일을 지정하도록 특별히 설계되었습니다. 원하는 효과를 얻으려면 다른 접근 방식을 사용하는 것이 좋습니다.

앵커 요소 <버튼> 요소. 이는 초기 요구 사항과 정확하게 일치하지 않을 수 있지만 <버튼>:

CSS 코드:

<code class="css">a {
  display: block;
  font-size: 18px;
  border: 2px solid gray;
  border-radius: 100px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

a:active {
  font-size: 18px;
  border: 2px solid green;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}

a:target {
  font-size: 18px;
  border: 2px solid red;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}</code>

HTML 코드:

<code class="html"><a id="btn" href="#btn">Demo</a></code>

이 접근 방식을 사용하면 이제 다음 동작을 관찰할 수 있습니다.

정상 상태: 버튼이 흰색입니다.
• 클릭하는 동안: 버튼이 녹색으로 변합니다
• 눌린 후: 버튼이 빨간색으로 변합니다

위 내용은 클릭 시 지속적인 버튼 스타일 변경을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!