CSS ::after Pseudo-element를 사용하여 호버에서 콘텐츠를 동적으로 변경하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

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

Patricia Arquette

풀어 주다： 2024-10-30 00:43:02

원래의

407명이 탐색했습니다.

How to Dynamically Change Content on Hover Using CSS ::after Pseudo-element?

CSS를 사용하여 호버에서 콘텐츠를 변경하는 방법

호버에서 요소의 콘텐츠를 변경하는 것은 웹 개발에서 일반적인 작업입니다. 간단한 프로세스라고 생각할 수도 있지만 ::after 및 ::before와 같은 의사 요소와 함께 CSS 콘텐츠 속성에 대한 더 깊은 이해가 필요합니다.

귀하의 예에서 목표는 변경하는 것입니다. 마우스를 올리면 'NEW' 라벨의 내용이 'ADD'로 변경됩니다. 처음에는 콘텐츠 속성을 사용하여 이 문제에 접근했지만 어려움을 겪었습니다. 다행히 원하는 효과를 얻을 수 있는 영리한 솔루션이 있습니다.

비결은 콘텐츠 속성을 ::after 의사 요소와 결합하는 데 있습니다.

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

로그인 후 복사

이 CSS 규칙은 p를 대상으로 합니다. 호버 상태에 있을 때 'item' 클래스 내의 'a' 태그 안에 'new-label' 클래스가 있는 요소입니다. 그런 다음 기존 콘텐츠를 'ADD'로 동적으로 바꿉니다.

설명하기 위해 업데이트된 예는 다음과 같습니다.

<code class="HTML"><div class="item">
    <a href="">
         <p class="label success new-label"><span class="align">New</span></p>
    </a>
</div></code>

로그인 후 복사

<code class="CSS">body {
    font-family: Arial, Helvetica, sans-serif;
}
.item {
    width: 30px;
}
a {
    text-decoration:none;
}
.label {
    padding: 1px 3px 2px;
    font-size: 9.75px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap;
    background-color: #bfbfbf;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-decoration: none;
}
.label.success {
    background-color: #46a546;
}

.item a p.new-label span{
  position: relative;
  content: 'NEW'
}
.item:hover a p.new-label span{
  display: none;
}
.item:hover a p.new-label:after{
  content: 'ADD';
}</code>

로그인 후 복사

이제 'NEW' 라벨 위로 마우스를 가져가면 초기 요구 사항을 충족하면서 'ADD'로 원활하게 변환됩니다.

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