How do I de-class a component whenever mouse hover aboves it?

For example, I have a component with a class of “text-center”, I want to achieve the effect that whenever user uses mouse to hover on the said component, it will get rid of the “text-center” class.

How do I achieve that effect?

To be more speific, I want to de-class the “turncate” class whenever user hover their mouse on the title of those playlist, how do I do that?

Thanks in advance.

  1. get the element
  2. add event listener on the element
  3. put a function to toggle (turn on/off) the classlist on the element

it will look something like:

const el = document.getElementById("thing");

function toggleClass() {
  el.classList.toggle("classToChange");
}

el.addEventListener("mouseover", toggleClass);

It might not exactly work, so make sure to google the various elements!

Usually, you want to use JS to add, remove, or toggle classes. However, what you are describing can be done in CSS I guess.

.someClass:not(:hover) {
  text-align: center;
}

BTW, the code you linked to seems to have non of the classes you are referring to.

thanks for the help, yeah I was just getting an example.

I see. Thanks. This seems to be what I need.