js鼠标经过显示文字

基础概念

JavaScript中的鼠标经过事件（Mouseover Event）是一种常见的用户交互事件，当鼠标指针移动到某个元素上方时触发。这个事件可以用来实现各种动态效果，比如显示提示信息、改变元素样式等。

类型与应用场景

Tooltip（工具提示）：最常见的应用，鼠标悬停在某个元素上时显示详细信息。
导航菜单高亮：鼠标经过导航项时改变背景色或字体颜色。
图片预览：鼠标悬停在缩略图上时显示大图预览。

示例代码

以下是一个简单的JavaScript示例，展示如何在鼠标经过时显示文字：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mouseover Example</title>
<style>
  .tooltip {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position the tooltip above the element */
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .tooltip::after {
    content: "";
    position: absolute;
    top: 100%; /* Position arrow at top edge of tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
  }

  .element:hover .tooltip {
    visibility: visible;
    opacity: 1;
  }
</style>
</head>
<body>

<div class="element" style="width:100px;height:100px;background-color:red;">
  Hover over me
  <div class="tooltip">This is some information!</div>
</div>

</body>
</html>