mouseover和mouseleave事件
时间: 2023-08-29 16:14:01 浏览: 118
mouseover事件事例
`mouseover` 和 `mouseleave` 事件是 JavaScript 中常用的鼠标事件。它们分别在标进入和离开元素时触发当鼠标指针移动到一个元素上时,就会触发 `mouseover` 事件。如果鼠标指针在元素内部移动,不会触发 `mouseover` 事件,除非它在该元素的子元素中移动。这个事件可以用来实现一些需要在鼠标悬停在某个元素上时触发的效果,例如显示工具提示。
当鼠标指针从一个元素移开时,就会触发 `mouseleave` 事件。如果鼠标指针移入该元素的子元素,不会触发 `mouseleave` 事件。这个事件可以用来实现一些需要在鼠标离开某个元素时触发的效果,例如隐藏工具提示。
下面是一个例子,演示了如何使用这两个事件:
```html
<!DOCTYPE html>
<html>
<head>
<title>Mouseover and Mouseleave events</title>
<style>
.box {
width: 100px;
height: 100px;
border: 1px solid #000;
}
.tooltip {
position: absolute;
background-color: #FFF;
border: 1px solid #000;
padding: 5px;
display: none;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<div class="tooltip" id="tooltip">Hello, world!</div>
<script>
var box = document.getElementById("box");
var tooltip = document.getElementById("tooltip");
box.addEventListener("mouseover", function() {
tooltip.style.display = "block";
});
box.addEventListener("mouseleave", function() {
tooltip.style.display = "none";
});
</script>
</body>
</html>
```
在这个例子中,当鼠标指针移动到名为 `box` 的元素上时,会显示一个包含文本“Hello, world!”的工具提示。当鼠标指针离开该元素时,工具提示会隐藏。这是通过在 `box` 元素上添加 `mouseover` 和 `mouseleave` 事件监听器来实现的。当 `mouseover` 事件触发时,会将 `tooltip` 元素的 `display` 样式设置为 `block`,使其显示出来;当 `mouseleave` 事件触发时,会将 `tooltip` 元素的 `display` 样式设置为 `none`,使其隐藏起来。
阅读全文