可折叠图标/内容的颜色改变悬停

Question

我正在研究"可折叠"内容(常见问题列表)。在预点击的"按钮"上，我有一个"加号"图标(按钮被按下后图标变为"减号"图标)。我想要的是预点击按钮"加"图标改变颜色(即，变成白色)时，按钮悬停。我不知道如何修改CSS，使图标改变悬停

I have try:

.collapsible:after, .hover{
color: $light;
}

但这只会逆转问题…提前感谢!下面的代码。

var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}

/* TARGET ICON */
.collapsible:after {
content: '2795'; /* Unicode character for "plus" sign (+) */
color: black;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "2796"; /* Unicode character for "minus" sign (-) */
color: white;
}
/* Style the button that is used to open and close the collapsible content */
.collapsible {
background-color: white;
color: black;
cursor: pointer;
padding: 10px 18px;
width: 100%;
border: solid;
border-width: thin;
border-radius: 5px;
margin-bottom: 5px;
text-align: left;
outline: none;
font-size: 24px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
background-color: black;
color: white;
}
/* Style the collapsible content. Note: hidden by default */
.content-faq {
padding: 0px 22px;
border-radius: 5px;
margin-bottom: 15px;
margin-top: -6px;
max-height: 0;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}

<button class="collapsible">Some Question</button>
<div class="content-faq">
<p>Some Answer</p>
</div>

Answer 1

使用.collapsible:hover::after选择使用::after创建的hover上的内容

由于您使用的是继承的符号，因此将其更改为简单的+-用于演示，仅显示效果
您可以使用任何符号，但没有继承颜色

var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}

/* TARGET ICON */
.collapsible::after {
content: '+';
/* Unicode character for "plus" sign (+) */
color: black;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "2212";
/* Unicode character for "minus" sign (-) */
color: white;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
background-color: white;
color: black;
cursor: pointer;
padding: 10px 18px;
width: 100%;
border: solid;
border-width: thin;
border-radius: 5px;
margin-bottom: 5px;
text-align: left;
outline: none;
font-size: 24px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.collapsible:hover {
background-color: black;
color: white;
}


/* Style the collapsible content. Note: hidden by default */
.content-faq {
padding: 0px 22px;
border-radius: 5px;
margin-bottom: 15px;
margin-top: -6px;
max-height: 0;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
.collapsible:hover::after {
color: white;  
}

<button class="collapsible">Some Question</button>
<div class="content-faq">
<p>Some Answer</p>
</div>