CSS만 사용하여 호버에서 콘텐츠를 동적으로 변경하는 방법은 무엇입니까?

CSS를 사용하여 마우스 오버 시 콘텐츠를 변경하는 방법

CSS만 사용하여 마우스 오버 시 콘텐츠를 변경하려면 다음과 함께 콘텐츠 속성을 활용할 수 있습니다. ::after 또는 ::before 의사 요소.

제공된 예에서 목표는 요소 위로 마우스를 가져갈 때 텍스트 "NEW"를 "ADD"로 변경하는 것입니다. 이를 달성하려면 다음 CSS를 추가하세요.

<code class="css">.item:hover a p.new-label:after {
    content: 'ADD';
}</code>

설명:

• .item:hover: 항목 요소에 호버 효과를 트리거합니다.
• a p.new-label: 앵커 태그 내부에 클래스 new-label이 있는 단락을 선택합니다.
• :after: 연결된 요소 뒤에 내용을 표시할 의사 요소를 생성합니다. to.
• content: 'ADD': 의사 요소 뒤에 표시할 콘텐츠를 정의합니다.

항목 위에 마우스를 올리면 :after 의사 요소가 트리거됩니다. , 내용이 "ADD"로 변경됩니다. 원본 "NEW" 텍스트는 다른 CSS 규칙을 사용하여 숨겨집니다.

<code class="css">.item:hover a p.new-label span {
    display: none;
}</code>

이 접근 방식을 사용하면 JavaScript에 의존하지 않고 CSS를 사용하여 마우스를 가져가면 요소의 콘텐츠를 동적으로 변경할 수 있습니다.

위 내용은 CSS만 사용하여 호버에서 콘텐츠를 동적으로 변경하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!