Javascript 如何使文本在点击后在图像上显示和消失。

我在找密码

假设手机上有图像。如果我们点击图像，文本就会出现，如果我们再次点击图像，文本就会消失。有人能给我这个功能的简单html、css和javascript代码吗？图像应具有响应性

---

请提供帮助。

根据您提供的代码，这里有一个解决方案，允许在使用JavaScript单击容器时切换div的可见性：

 <style>
    /* Container holding the image and the text */
    .container {
        position: relative;
    }

    /* Bottom right text */
    .text-block {
        position: absolute;
        width: 70%;
        height: 70%;
        top: 20px;
        left: 20px;
        background-color: black;
        color: white;
        padding-left: 20px;
        padding-right: 20px;
        opacity: 0.7;
    }

    p {opacity: 1;}

    #clickToShow{display:none;} /* to hide by default */
</style>

<script>
    //now the function to toggle visibility
    function clickToShow() {
        var div = document.getElementById("clickToShow");
        div.style.display = div.style.display == "block" ? "none" : "block";
    }
</script>
<!-- notice onclick="clickToShow()" this is how you call JS method-->
<div class="container" style="cursor:pointer;" onclick="clickToShow();">
    <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" alt="Norway" style="width:100%; height: 70%;">
    <div class="text-block" id="clickToShow"> 
        <h4>Nature</h4>
        <p>What a beautiful sunrise!</p>
    </div>
</div>

/*包含图像和文本的容器*/
.集装箱{
位置：相对位置；
}
/*右下角文本*/
.文本块{
位置：绝对位置；
宽度：70%；
身高：70%；
顶部：20px；
左：20px；
背景色：黑色；
颜色：白色；
左侧填充：20px；
右边填充：20px；
不透明度：0.7；
}
p{opacity:1；}
#单击显示{display:none；}/*默认情况下隐藏*/
//现在是切换可见性的函数
函数clickToShow（）{
var div=document.getElementById（“单击显示”）；
div.style.display=div.style.display==“块”？“无”：“块”；
}
自然界
多么美丽的日出啊

下面是一把小提琴，显示它的工作原理：

---

对不起，没有。这也是为了帮助您调试所编写代码的问题。这里没有人会为您编写代码。请花些时间阅读帮助页面，特别是命名的部分，更重要的是，请阅读。欢迎访问SO。请提供一个最小、完整且可验证的示例。向我们展示您最近一次尝试的代码以及您被卡住的地方。并解释为什么结果不是你所期望的。