当菜单打开时，如何更改字体真棒图标的颜色

Question

我做了一个"汉堡包菜单"；通过检查的输入。

我想知道当菜单展开时，目标是什么，使用什么伪元素来更改字体的颜色或背景？如果我可以通过点击页面中的任何位置来关闭此菜单？

.container {
width: 300px;
margin: auto;
}
#options li {
text-decoration: none;
}
#options:hover {
background-color: #254574;
color: white;
}
.elem {
list-style: none;
}
.show-modal {
border-radius: 25px;
padding: 5px;
}
.show-modal:hover {
background-color: grey;
}
.options {
position: absolute;
background-color: white;
cursor: pointer;
color: #091f43;
line-height: 2rem;
height: 2rem;
width: 2rem;
font-size: 0.9rem;
display: none;
margin-top: 15px;
}
.modifier-checkbox:checked~.options {
display: flex;
flex-direction: column;
width: 100px;
z-index: 4;
}
.elem {
background-color: white;
}
.modifier-checkbox {
opacity: 0;
}
.card {
display: flex;
flex-direction: column;
box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
border-radius: 5px;
background: inherit;
margin-bottom: 2rem;
position: relative;
&::before {
content: "";
position: absolute;
background: inherit;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: inset 0 0 2000px rgba(255, 255, 255, 0.5);
filter: blur(10px);
margin: -20px;
}
}
.header-card {
padding: 0.8rem 1rem 0.5rem 1rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: $border;
}
.author {
display: flex;
font-weight: bold;
font-size: 0.94rem;
color: #091f43;
}
.date {
display: flex;
font-size: 0.75rem;
color: #0000007e;
}
.content {
font-size: 0.94rem;
display: flex;
padding: 1rem 1rem 1.15rem 1rem;
}
.img-card {
position: relative;
display: inline-block;
img {
display: block;
width: 100%;
object-fit: contain;
}
}
.flex-right {
display: flex;
justify-content: space-between;
align-items: center;
}
.fa-tag {
margin-right: 0.4rem;
}
.tag {
cursor: default;
font-size: 0.75rem;
padding: 0.3rem 0.8rem;
margin-right: 15px;
font-weight: bold;
text-transform: capitalize;
background-color: blue;
color: white;
box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.112), -8px -8px 12px 0 rgba(149, 142, 216, 0.057);
border-radius: 50px;
}
.likeBar {
display: flex;
justify-content: space-between;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<div class="container">
<div class="card">
<div class="header-card">
<div class="column">
<p class="author">auteur</p>
<p class="date">date</p>
</div>
<div class="flex-right">
<p v-if="tag" class="tag">
<i class="icon-tag fas fa-tag"></i>tag
</p>
<div class="modifier-toggle">
<input type="checkbox" name="toggle" id="modifier-checkbox-1" class="modifier-checkbox" />
<label for="modifier-checkbox-1" class="modifier-toggle">
<i class="show-modal fas fa-ellipsis-h"></i>
</label>
<ul class="options">
<li class="elem">Modifier</li>
<li class="elem">Supprimer</li>
</ul>
</div>
</div>
</div>
</div>
</div>

jsFiddle 视图

Answer 1

• 要更改字体，请尝试以下操作

CSS

.fas:hover {
background-color: #000;
color: #fff;
}

JS

var ico = document.getElementsByClassName("fa-ico")[0]
ico.addEventListener('click', function () {
this.style.color = "red"
})

• 关于关闭可以使用e.target的菜单

示例

var container = document.getElementsByClassName("container")[0]
container.addEventListener('click', function (e) {
if(e.target.className === "container") {
this.style.display = "none";
}
})

Answer 2

试试这个.elem{background-color: red;padding:3px;text-align:center;color:green;}

要更改图标颜色，请使用color:<color-name>;，因为它基于字体