我想悬停图标,这样就会显示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>