CSS를 사용하여 마우스 오버 시 콘텐츠를 동적으로 변경하여 사용자를 위한 대화형 환경을 만들려면 어떻게 해야 합니까?

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

오늘날의 웹 개발에서는 콘텐츠 요소에 대한 동적인 변경이 상호작용성과 매력을 더해줍니다. 이러한 일반적인 요구 사항 중 하나는 마우스를 가져갈 때 요소의 콘텐츠를 업데이트하는 것입니다. 이것이 사소해 보일 수도 있지만 CSS는 우아한 솔루션을 제공합니다.

CSS 콘텐츠 속성 사용

CSS 콘텐츠 속성은 ::after 및 ::before 의사 요소와 함께 개발자에게 힘을 실어줍니다. 표시된 내용을 수정합니다. 이러한 요소를 활용하여 대상 요소의 콘텐츠를 변경하는 원활한 호버 효과를 만들 수 있습니다.

호버 상태에 대한 CSS 규칙 수정

원하는 호버 효과를 얻으려면 다음을 추가합니다. CSS 규칙:

.item:hover a p.new-label::after {
  content: 'ADD';
}

이 규칙은 브라우저가 마우스 오버 상태에 들어갈 때 'new-label' 클래스가 있는 요소의 콘텐츠에 'ADD'를 추가하도록 지시합니다.

구현 예

다음 예를 고려해 보세요.

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

<code class="css">.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를 사용하여 마우스 오버 시 콘텐츠를 동적으로 변경하여 사용자를 위한 대화형 환경을 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!