누른 상태가 아닌 클릭한 후 버튼 스타일을 변경하는 방법은 무엇입니까?

눌린 버튼 선택기

:active 선택기를 사용하여 버튼에 제공된 CSS 코드는 클릭하고 나서 버튼 스타일을 변경하지 않습니다. 유지된. 버튼을 누른 후 버튼 스타일이 변경되는 원하는 효과를 얻으려면 다른 접근 방식이 필요합니다.

버튼을 클릭할 때만 트리거되는 :active 선택기를 사용하는 대신 다음을 사용할 수 있습니다. 클릭한 후 버튼 스타일을 변경하려면 대상 선택기를 사용하세요. :target 선택기는 현재 하이퍼링크 참조의 대상인 요소와 일치합니다.

다음은 버튼 대신 앵커() 태그를 사용하는 예입니다.

<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>

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

이 예에서 앵커 태그의 ID는 "btn"이고 동일한 ID에 대한 링크가 있습니다. 링크를 클릭하면 앵커 태그가 하이퍼링크 참조 대상이 되고, :target 선택기가 적용되어 버튼 스타일이 빨간색으로 변경됩니다.

위 내용은 누른 상태가 아닌 클릭한 후 버튼 스타일을 변경하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!