버튼을 클릭하여 HTML 요소의 호버 색상을 동적으로 수정하는 방법은 무엇입니까?

CSS 변수 및 JavaScript를 사용하여 요소 호버 색상을 동적으로 수정

이 기사는 웹 대화식 경험을 향상시키기 위해 버튼을 클릭하여 HTML 요소의 호버 색상을 동적으로 변경하는 방법을 소개합니다. CSS 변수와 JavaScript를 사용 하여이 기능을 구현합니다.

목표는 버튼을 클릭하여 기존 요소 호버 스타일을 수정합니다. 이를 위해 CSS 변수를 사용하여 호버 색상을 정의하고 JavaScript를 통해 버튼 클릭 이벤트에서 CSS 변수의 값을 수정합니다.

구현 계획 :

먼저, HTML 구조에는 대상 요소 ( .element ) 및 여러 버튼 ( .change-color )이 포함되며 각 버튼은 호버 색상에 해당합니다.

<div class="container">
  <div class="element"></div>
  <button class="change-color">빨간색</button>
  <button class="change-color">녹색</button>
  <button class="change-color">파란색</button>
</div>

CSS 스타일은 요소의 기본 스타일을 정의하고 CSS 변수 --color 색상을 사용하여 호버 색상, 기본 빨간색을 제어합니다.

 .요소 {
  너비 : 100px;
  높이 : 100px; /* Aspect-Ratio는 모든 브라우저와 호환되지 않으며 고정 높이로 변경*/
  마진 : 20px;
  배경색 : Lightgray; /* 효과를 쉽게 관찰 할 수 있도록 배경색을 추가하십시오*/
}

.Element : 호버 {
  배경 : var (-색상, 빨간색);
}

마지막으로, JavaScript 코드는 각 버튼 클릭 이벤트에 대해 경청합니다. 버튼을 클릭 한 후 버튼 텍스트 내용 (색상 이름)을 가져 와서 el.style.setProperty() 메소드를 사용하여 CSS 변수 --color 에 색상 값을 할당하십시오.

 const el = document.querySelector ( ". 요소");

document.querySelectorall ( ". Change-Color"). foreach (e => {
  e.addeventListener ( "클릭", () => {
    el.style.setProperty ( "-color", e.textContent);
  });
});

HTML, CSS 및 JavaScript의 공동 작업을 통해 버튼을 클릭하여 HTML 요소의 호버 색상을 동적으로 변경하는 기능을 실현할 수 있습니다. 이 방법은 간단하고 효율적이며 유지 관리가 쉽습니다.

위 내용은 버튼을 클릭하여 HTML 요소의 호버 색상을 동적으로 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!