CSS를 사용하여 클릭 시 이미지를 쉽게 변경하는 방법은 무엇입니까?

클릭 시 손쉽게 이미지 변경

클릭 시 이미지를 변경하는 데 필요한 복잡한 JS 코드에 지치셨나요? 의사 선택기 또는 .active 클래스를 사용하여 더 간단한 솔루션을 탐색해 보세요.

솔루션 이해하기

광범위한 JS 코드 없이 클릭 시 이미지를 변경하려면 다음을 활용할 수 있습니다. 기술:

• 의사 선택기: 클릭 시 요소를 대상으로 하는 의사 선택기를 만들고 CSS를 사용하여 다른 이미지로 스타일을 지정할 수 있습니다.
• .active 클래스: 클릭 시 대상 요소에 .active 클래스를 적용하면 CSS를 이용해 원하는 이미지를 표시할 수 있습니다.

솔루션 구현

의사 선택기 사용:

li:hover img, li:active img {
    display: none;
}

li:hover img#new_image, li:active img#new_image {
    display: block;
}

.active 클래스 사용:

1. 다음에 .active 클래스를 추가합니다. 대상 목록 요소: li.active.
2. 이 클래스에 대한 CSS 규칙 정의:

li.active img {
    display: none;
}

li.active img#new_image {
    display: block;
}

.active 클래스를 사용한 예제 코드:

<ul>
  <li><img>

참고: 적절한 클릭 이벤트 리스너를 추가하거나 인라인 onclick 속성을 사용하여 변경을 트리거하는 것을 잊지 마세요.

위 내용은 CSS를 사용하여 클릭 시 이미지를 쉽게 변경하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!