CSS만 사용하여 마우스 오버 시 콘텐츠를 변경하는 방법은 무엇입니까?

호버에서 콘텐츠를 변경하는 방법

소개

호버 효과는 추가 정보를 제공하거나 콘텐츠의 요소에 주의를 환기시키는 데 사용되는 일반적인 기술입니다. 웹 페이지. 이 문서에서는 CSS만 사용하여 마우스 커서를 요소 위로 가져갈 때 요소의 내용을 변경하는 간단하면서도 효과적인 방법을 살펴봅니다.

문제 설명

목표는 " NEW' 라벨은 마우스 커서를 위에 올리면 'ADD'로 변경됩니다. 이는 JavaScript나 추가 라이브러리를 사용하지 않고 순전히 CSS를 통해 달성해야 합니다.

구조를 위한 CSS 콘텐츠 속성

:after 및 ::before pseudo-와 함께 도입된 CSS 콘텐츠 속성 요소는 요소의 내용을 수정하는 방법을 제공합니다. 이 속성을 활용하여 문제를 해결해 보겠습니다.

해결책

1. 마우스를 올리면 원본 콘텐츠 숨기기:

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

이 규칙은 디스플레이를 사용합니다. .item 위로 마우스 커서를 가져갈 때 "NEW" 컨텐츠를 포함하는 요소.

2. ::after:

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

를 사용하여 새 컨텐츠를 표시합니다. ::after 요소는 호버 상태에 있을 때 .new-label 요소 뒤에 "ADD" 콘텐츠를 삽입하는 데 사용됩니다. 콘텐츠 속성은 새 콘텐츠를 지정합니다.

업데이트된 코드

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

결론

콘텐츠 속성과 호버 효과를 결합하여 간단하고 우아한 솔루션을 성공적으로 구현했습니다. 순수한 CSS를 사용하여 마우스 오버 시 콘텐츠를 변경합니다. 이 기술은 널리 적용 가능하며 사용자 상호 작용을 향상하고 역동적이고 시각적으로 매력적인 방식으로 추가 정보를 제공하는 데 사용할 수 있습니다.

위 내용은 CSS만 사용하여 마우스 오버 시 콘텐츠를 변경하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!