Collapsible Icon/Content Color Change on Hover-CodePudding

I'm working on 'collapsible' content (a FAQ dropdown). On the pre-clicked 'button' I have a 'plus' icon (the icon turns to a 'negative' icon after the button is pressed). What I would like is for the pre-clicked button 'plus' icon to change colors (namely, turn white) when the button is hovered over. I'm not sure how to modify the CSS to make the icon change on hover.

I have tried:

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

But this only reverses the issue... Thank you in advance! Code below.

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: '\02795'; /* 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>

CodePudding user response：

Use .collapsible:hover::after to select the content on hover created with the use of ::after

As the greyish color is of the symbol you used which is inherited so changed that to simple - for demo to show effect only .
You can use any symbol but without inherit color

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>