js鼠标经过改变透明度

基础概念

在JavaScript中，通过监听鼠标事件（如mouseover和mouseout），可以实现元素透明度的动态变化。透明度通常通过CSS的opacity属性来控制，其值范围从0（完全透明）到1（完全不透明）。

类型与应用场景

悬停效果：鼠标悬停在元素上时改变透明度，常见于导航菜单、图片展示等。
动态提示：在用户与页面元素交互时提供视觉反馈，如按钮点击后的短暂透明变化。

示例代码

以下是一个简单的示例，展示了如何在鼠标经过时改变元素的透明度：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Opacity Change on Hover</title>
<style>
  .element {
    width: 200px;
    height: 200px;
    background-color: blue;
    opacity: 1;
    transition: opacity 0.3s ease; /* 平滑过渡效果 */
  }
</style>
</head>
<body>

<div class="element" onmouseover="this.style.opacity='0.5'" onmouseout="this.style.opacity='1'"></div>

</body>
</html>