html - 悬停在图像上时按钮显示
问题描述
我是 css 新手,正在尝试在我的图像上实现一个功能,即当有人用鼠标悬停在图像上时,将显示“阅读更多”按钮。这是我到目前为止的代码 -
HTML-
<div class="container">
<img src="./images/pairingo.png">
<div class="button"><a href="#">READ MORE</a></div>
</div>
CSS-
.container{
position: relative;
margin-top: 20px;
}
.container .button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
opacity: 0;
font-size: 16px;
padding: 12px 24px;
border-radius: 5px;
transition: opacity .5s;
}
img{
width:40%;
height:40%
}
img:hover .button{
opacity:1;
}
这似乎不起作用。也许我在悬停部分做错了什么?任何帮助将不胜感激。
解决方案
您需要将悬停 css 添加到 .container 类。因为 img 是 .container 类的孩子,而 .button 不是 img 的孩子。
尝试这个。
.container{
position: relative;
margin-top: 20px;
width: 300px;
height: 300px;
}
.container .button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
opacity: 0;
font-size: 16px;
padding: 12px 24px;
border-radius: 5px;
transition: opacity .5s;
}
img{
width:100%;
}
.container:hover .button{
opacity:1;
}
<div class="container">
<img src="https://placehold.it/300x300/ccc/666?text=" class="img-responsive" alt="">
<div class="button"><a href="#">READ MORE</a></div>
</div>
推荐阅读
- jboss - bootclasspath 中的 jboss-modules.jar 导致 ClassNotFoundException
- flutter - Flutter 在应用购买查询PastPurchses BillingResponse.serviceDisconnected 错误
- swift - 自生成新的 xcodeproj 文件以来,项目中架构 x86_64 的新未定义符号
- jq - 使用jq数组切片但遇到数组错误
- node.js - 无法渲染缓冲区 png
- html - 如何使用beautifulsoup4抓取网站中的所有h3标签
- node.js - 如何为基于 AJAX 的站点生成站点地图?
- node.js - 错误:POST http://localhost:3001/undefined/api/news/getNewsByCategoryId 404(未找到)
- oracle - 编写程序打印所有员工的等级 oracle error not select
- intellij-idea - Intellij IDEA 中的应用程序数据文件目录