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>
这是一个显示它有效的小提琴:
推荐阅读
- hyperledger-fabric - 跨节点的状态数据库如何在超级账本结构网络中同步?
- zend-framework3 - zendframework 3中未定义的变量公司
- mysql - 关闭 ONLY_FULL_GROUP_BY 是个好主意吗?
- javascript - 循环遍历同一字符串的多个实例的文本
- amazon-web-services - 如何将 IAM 角色分离到 AWS 运行实例中,并使用 java 将新 IAM 角色附加到该特定实例中
- javascript - 阻止谷歌图表在值之间添加日期
- php - 插入数据库时如何将html代码转换为php
- hazelcast - 我们可以在 Hazelcast 中为所有组合的地图配置内存限制吗?
- msbuild - 使用 SYSTEM 帐户编译 RAD Studio 2010 项目不会将 BPL 文件放在 %BDSCOMMONDIR% 下。任何其他帐户都可以
- r - 多条件计算