css - 字体真棒:使用 hover::before 时,图标消失了
问题描述
我想悬停图标,以便它显示before
元素,但是每次我悬停它时,图标都会消失,当我悬停图标的右半部分时,什么也没发生。如果我更改before
为after
,则效果很好。
.container {
background-color: lightgray;
margin: auto;
width: 500px;
height: 200px;
padding: 100px;
}
.icon {
font-size: 50px;
cursor: pointer;
color: red;
}
.icon:hover::before {
content: '';
background-color: black;
padding: 10px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<div class="container">
<i class="fas fa-exclamation-circle icon"></i>
</div>
解决方案
这将在悬停时添加黑色背景。你不能休息,content
因为它用于显示 FontAwesome 的图标。
.container {
background-color: lightgray;
margin: auto;
width: 500px;
height: 200px;
padding: 100px;
}
.icon {
font-size: 50px;
cursor: pointer;
color: red;
}
.icon:hover::before {
background-color: black;
padding: 10px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<div class="container">
<i class="fas fa-exclamation-circle icon"></i>
</div>
推荐阅读
- reactjs - 如何在反应中的代码中分配动态值
- wordpress - 确定在 Wordpress 网站上使用了哪些 Avada Fusion Builder Elements
- javascript - 为什么 dns.lookup 对这些不正确的 URL 起作用?
- reactjs - 使用 react-admin 从 API 响应的数据中下载文件
- javascript - 使用 Javascript 限制分页
- excel - vba 错误地从单个变量输入单元格值
- python - 如何使用 Python 标记 csv 文件中特定列中的所有行?
- angular - crud 操作后无需重新加载即可刷新角度材料表
- javascript - toLocaleDateString 返回意外的格式化时间
- python - Python Flask 中关于 500 Internal Server Error 的问题