:target 의사 클래스를 사용하여 버튼을 누른 후 버튼 모양을 수정하는 방법은 무엇입니까?

"누른" 버튼 선택기

버튼을 누른 후 버튼의 모양을 변경하려는 경우 기존의 :active 선택기로는 충분하지 않을 수 있습니다. . 이 선택기는 버튼을 물리적으로 누르고 있을 때만 트리거됩니다.

원하는 기능을 달성하기 위한 대체 접근 방식은 :target 의사 클래스를 활용하는 것입니다. 이 클래스는 해당 앵커 포인트(이 경우 #btn)가 타겟팅될 때 활성화됩니다.

구현:

태그가 있는 태그:

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

:active 및 :target 의사 클래스를 통합하도록 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>

이 구현을 사용하면 버튼이 처음에 나타납니다. 정상 상태(흰색)입니다. 클릭하면 녹색(활성 상태)으로 변합니다. 버튼을 놓으면 빨간색 상태(대상 상태)로 전환됩니다.

위 내용은 :target 의사 클래스를 사용하여 버튼을 누른 후 버튼 모양을 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!