html - 悬停问题 - 悬停时显示图像
问题描述
新手在这里。
目标是在悬停时显示包含文本的图像。从技术上讲,当我将鼠标悬停在图像显示的“测试”容器上时,我得到了我想要的东西。但是当我将鼠标悬停在“文本”区域上时,它不会显示。任何帮助将不胜感激。
HTML:
<div class="test">
<img class="testimg" src="images/feat-img2.jpg">
<p class="test-text">This is a caption text</p>
</div>
CSS:
.test {
position: relative;
padding: 0;
margin: 0;
width: 100%;
height: 200px;
overflow: hidden;
background: #111111;
}
.test img {
display: block;
max-width: 100%;
height: auto;
opacity: 0;
transition: all 0.3s ease-in-out;
}
.test:hover, .test img:hover {
opacity: 1;
}
.testimg {
width: 100%;
height: auto;
}
.test-text {
display: block;
position: absolute;
width: 100%;
color: #fff;
left: 50%;
bottom: 50%;
padding: 1em;
font-weight: 700;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
解决方案
将此属性添加到您的测试文本类
pointer-events: none;
推荐阅读
- react-native - 单击时更改可触摸不透明度内的文本
- android - 在android中将带有文本(主题标签)的图像作为instagram故事分享
- php - Laravel 的工作会覆盖其他工作吗?
- javascript - 同步迭代异步函数
- python - 读取带有爬取“无效访问”的 JSON 数据
- scala - 将值作为参数从 js 传递给播放控制器
- typescript - loopback 4.0中如何使用存储组件?
- javascript - 减少对象和嵌套对象:javascript
- asp.net-core - 使用 Http.sys 和服务结构的 asp.net 核心上的通配符证书问题
- apache-spark-sql - 从复杂的嵌套 json 中获取值