让JS (mouseover，mouseleave)在html文档中的图片上显示不同的文本

要在HTML文档中的图片上使用JavaScript的mouseover和mouseleave事件显示不同的文本，可以通过以下步骤实现：

基础概念

mouseover事件：当鼠标指针移动到元素上方时触发。
mouseleave事件：当鼠标指针离开元素时触发。

实现步骤

HTML结构：创建一个包含图片和用于显示文本的元素的容器。
CSS样式：设置文本的初始状态为隐藏。
JavaScript逻辑：添加事件监听器来控制文本的显示和隐藏。

示例代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Hover Text</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="image-container">
        <img src="path/to/your/image.jpg" alt="Sample Image">
        <div class="hover-text">Hover over me!</div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.image-container {
    position: relative;
    display: inline-block;
}

.hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', function() {
    const imageContainer = document.querySelector('.image-container');
    const hoverText = document.querySelector('.hover-text');

    imageContainer.addEventListener('mouseover', function() {
        hoverText.style.opacity = '1';
    });

    imageContainer.addEventListener('mouseleave', function() {
        hoverText.style.opacity = '0';
    });
});