2023-08-28T16:00:44.png

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript 鼠标移到链接上时显示文本</title>
  <style>
.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip-content {
  position: absolute;
  background-color: #fff;
  border: 1px solid #000;
  padding: 10px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  width: 200px;
  display: none;
}


  </style>
</head>
<body>
  
<a href="#" class="link" data-tooltip="这是链接1">链接1</a>
<a href="#" class="link" data-tooltip="这是链接2">链接2</a>
<a href="#" class="link" data-tooltip="这是链接3">链接3</a>
<!-- 添加更多链接... -->

<div id="tooltip" class="tooltip-container">
  <div id="tooltipContent" class="tooltip-content"></div>
</div>



  <script>
var links = document.getElementsByClassName("link");
var tooltip = document.getElementById("tooltipContent");

for (var i = 0; i < links.length; i++) {
  links[i].addEventListener("mouseover", showContent);
  links[i].addEventListener("mouseout", hideContent);
}

function showContent() {
  var content = this.getAttribute("data-tooltip");
  tooltip.innerHTML = content;
  tooltip.style.display = "block";
}

function hideContent() {
  tooltip.style.display = "none";
}


  </script>
</body>
</html>