js鼠标经过透明度变化

基础概念

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

类型与应用场景

悬停效果：鼠标悬停在元素上时改变透明度。
过渡动画：结合CSS过渡或动画，实现平滑的透明度变化。
交互指示：在导航菜单、按钮等元素上应用，以指示可点击状态。

示例代码

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

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

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

</body>
</html>