html - 使用伪类之前无法在输入按钮悬停中显示图标
问题描述
当用户将鼠标悬停在按钮上时,我需要显示一个信封图标。
我使用伪类before
来显示图标。当我更改opacity
为.btn-btn-envelope::before
时1
,我仍然看不到信封图标。
.btn-pos {
margin-top: 10px;
float: right;
}
.btn-btn {
border: none;
background-color: #502030;
color: #fff;
padding: 10px 0;
font-size: 15px;
cursor: pointer;
font-family: 'Lekton', sans-serif;
text-align: center;
display: inline-block;
position: relative;
overflow: hidden;
width: 90px;
}
.btn-btn-envelope {
transition: all 0.3s ease-in-out;
}
.btn-btn-envelope::before {
content: url('https://image.flaticon.com/icons/png/128/1034/1034138.png');
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
right: 0;
opacity: 0;
width: 15px;
height: 100%;
}
.btn-btn-envelope:hover {
text-indent: -20px;
}
.btn-btn-envelope:hover::before {
opacity: 1;
text-indent: 0px;
}
<div class="btn-pos">
<input type="submit" value="Send" class="btn-btn btn-btn-envelope">
</div>
(小提琴)
解决方案
推荐阅读
- css - 无需 Javascript 即可响应 CSS 工具提示
- elasticsearch - 需要解释为什么下面的弹性搜索查询会根据自定义设置和映射给出不同的结果
- mysql - Laravel:尝试捕获中的 DB::transaction() 不起作用
- python - 在 python 中导入期间没有名为“cv2”的模块
- java - Spring Hibernate查询与非主键的一对一关系
- google-calendar-api - 如何从我的 Google 日历中导出空闲/忙碌状态
- php - 数组到 JSON 的转换不处理嵌套数组
- linux - 仅提取 url 段而不是 shell 脚本中的以下正则表达式?
- bash - 在 kafka-connect docker 启动并运行后运行 bash 脚本
- c++ - 即使使用了...,参数包也不会用“...”扩展