HTML에서 JavaScript 호버 기능을 구현하는 방법
- PHPz원래의
- 2023-04-25 10:46:411787검색
JavaScript 호버 기능은 마우스 포인터를 요소 위로 가져갈 때 프롬프트 정보 표시, 요소 스타일 변경 등과 같은 지정된 작업을 수행할 수 있음을 의미합니다. 이 기능은 웹 디자인에서 매우 일반적이며 사용자에게 더 나은 대화형 경험을 제공할 수 있습니다. HTML에서 JavaScript 호버 기능을 구현하려면 아래 단계를 따르세요.
1단계: HTML 코드 작성
먼저 호버 기능을 구현하는 데 필요한 요소를 포함하여 기본 HTML 코드를 작성해야 합니다. 예를 들어 다음과 같은 간단한 div 요소를 만들 수 있습니다.
<div id="myDiv">这是一个 div 元素</div>
2단계: JavaScript 코드 추가
다음으로, 호버 기능을 구현하려면 JavaScript 코드를 추가해야 합니다. HTML 파일의 헤드 요소에 JavaScript 코드를 배치하거나 외부 .js 파일에 배치한 다음 참조할 수 있습니다. 예를 들어 다음은 간단한 JavaScript 코드입니다.
const myDiv = document.getElementById("myDiv");
myDiv.addEventListener("mouseover", function() {
myDiv.style.backgroundColor = "red";
});
myDiv.addEventListener("mouseout", function() {
myDiv.style.backgroundColor = "white";
});
이 코드는 먼저 document.getElementById("myDiv") 메서드를 통해 ID가 "myDiv"인 요소를 가져옵니다. 그런 다음 addEventListener() 메서드를 통해 요소에 두 개의 이벤트 리스너를 추가합니다. 첫 번째 리스너는 mouseover이며, 이는 마우스 포인터가 요소 위에 있을 때 시작되는 이벤트를 나타냅니다. 이벤트가 발생하면 style.BackgroundColor 메소드를 통해 요소의 배경색을 빨간색으로 설정할 수 있습니다. 두 번째 리스너는 mouseout으로, 마우스 포인터가 요소를 떠날 때 트리거되는 이벤트를 나타냅니다. 이벤트가 발생하면 배경색을 흰색으로 재설정할 수 있습니다. document.getElementById("myDiv") 方法获取到 id 为 "myDiv" 的元素。然后，通过 addEventListener() 方法为该元素添加两个事件监听器。第一个监听器是 mouseover，表示当鼠标指针悬停在该元素上方时触发的事件。当事件触发时，我们可以通过 style.backgroundColor 方法设置该元素的背景色为红色。第二个监听器是 mouseout，表示当鼠标指针离开该元素时触发的事件。当事件触发时，我们可以将背景色重新设置为白色。
这段代码的效果是，在鼠标指针悬停在该 div 元素上时，其背景色变成红色，鼠标指针离开时背景色恢复为白色。
第三步：调用 JavaScript 代码
最后，需要将 JavaScript 代码与 HTML 页面连接起来，以让 hover 功能生效。可以通过以下方式调用 JavaScript 代码：
- 将 JavaScript 代码直接放在 HTML 页面的