js鼠标经过的标签的程序
时间: 2024-03-16 18:42:03 浏览: 14
以下是一个简单的 JS 程序,用于实现鼠标经过时改变标签的样式:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mouseover Example</title>
<style>
/* 默认样式 */
.my-class {
color: black;
background-color: white;
}
/* 鼠标经过时的样式 */
.my-class:hover {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<p class="my-class">这是一个段落。</p>
<p class="my-class">这是另一个段落。</p>
<script>
// 获取所有带有 my-class 类的元素
var elements = document.getElementsByClassName("my-class");
// 遍历所有元素,并添加鼠标事件处理程序
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener("mouseover", function() {
this.classList.add("my-class-hover");
});
elements[i].addEventListener("mouseout", function() {
this.classList.remove("my-class-hover");
});
}
</script>
</body>
</html>
```
在这个示例中,我们定义了一个名为 my-class 的 CSS 类,用于指定元素的默认样式和鼠标经过时的样式。然后在 HTML 中创建了两个带有该类的段落元素。
在 JavaScript 中,我们通过 document.getElementsByClassName 获取到所有带有 my-class 类的元素,并使用 for 循环遍历它们。对于每个元素,我们使用 addEventListener 方法添加了两个事件处理程序,分别处理鼠标经过和鼠标离开事件。在鼠标经过事件处理程序中,我们使用 classList.add 方法将名为 my-class-hover 的类添加到元素中,从而改变元素的样式。在鼠标离开事件处理程序中,我们使用 classList.remove 方法将该类从元素中移除,恢复元素的默认样式。
注意,在 CSS 中定义了 .my-class:hover 伪类,用于指定鼠标经过时的样式。在 JavaScript 中,我们并没有直接改变元素的样式,而是添加或移除了一个新的类。这种方法可以避免影响元素的默认样式,同时也可以让样式更加灵活和易于管理。