CSS 및 JavaScript를 사용하여 마우스 오버 시 텍스트 색상을 반전시키는 방법은 무엇입니까?

마우스를 올리면 텍스트 색상 반전

이 GIF는 원하는 효과를 보여줍니다.

[텍스트가 흰색으로 바뀌는 GIF 마우스 호버]

CSS와 JS를 사용하여 이 효과를 만드는 것이 가능합니다. 한 가지 방법은 복제된 텍스트 레이어의 클립 경로를 조작하여 마우스를 올리면 반전된 색상을 표시하는 것입니다.

<code class="css">h1 {
  color: #000;
  display: inline-block;
  margin: 50px;
  text-align: center;
  position: relative;
}

h1:before {
  position: absolute;
  content: attr(data-text);
  color: #fff;
  background: #000;
  clip-path: circle(20px at var(--x, -100%) var(--y, -100%));
}</code>

<code class="js">document.body.onmousemove = function(e) {
  // Adjust the cursor position
  c.style.left = e.clientX + 'px';
  c.style.top = e.clientY + 'px';

  // Adjust the clip-path
  h.style.setProperty('--x', (e.clientX - p.top) + 'px');
  h.style.setProperty('--y', (e.clientY - p.left) + 'px');
}</code>

마우스를 움직이면 스크립트는 클립 경로를 조정하여 더 많은 내용을 표시합니다. 텍스트를 반전시켜 호버 효과를 만듭니다.

위 내용은 CSS 및 JavaScript를 사용하여 마우스 오버 시 텍스트 색상을 반전시키는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!