将鼠标悬停在图像上时无法显示文本

<img src="image.jpg" alt="Image" title="这是图像的描述信息">

<style>
    .image-container {
        position: relative;
        display: inline-block;
    }
    .image-container::after {
        content: "这是图像的描述信息";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        color: #fff;
        padding: 5px;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .image-container:hover::after {
        opacity: 1;
    }
</style>

<div class="image-container">
    <img src="image.jpg" alt="Image">
</div>

<script>
    function showText() {
        var textElement = document.getElementById("text");
        textElement.style.display = "block";
    }
    function hideText() {
        var textElement = document.getElementById("text");
        textElement.style.display = "none";
    }
</script>

<div onmouseover="showText()" onmouseout="hideText()">
    <img src="image.jpg" alt="Image">
    <div id="text" style="display: none;">这是图像的描述信息</div>
</div>