How to change the class when I hover over an element?

Question

First of all, I am really new on JS or in any other programming language and this is my first post on Stackoverflow; Having said that, I apologize in advance for any mystake and let's go to the question.

I have this code and I need to change the classes of the li and the i elements with only one hover.

What I want is make both of them change their colors when I hover over them (the thing about the colors is just an example, as a matter of fact I will have to make some more changes), for example, If I hover over the li , the i also has its color changed and vice versa.

I provided two examples in my codepen, in the first one I selected the li and the i elements and in the second I selected the a element, all of them with their respective classes.

In the first one when I hover over the li its color changes but the i doesn't suffer any alteration and if I hover over the i it changes, but the li is kept the same.

In short, I need exactly the same effect of the codepen, but I need it happening with the text ( li ) and with the arrow( i ) at the same time.

About the second example, it doesn't work well.

ps It is important that once an item has received the class active , it only backs to its original class when another item receives the hover and becomes active , if the cursor is moved to any other part of the screen then the item should hold the class, so that there is always an item with the class active .

https://codepen.io/WegisSilveira/pen/qzMqxj

    <ul>
    <a href="">
      <li class="test">Banheiro</li>
      <i class=" test ">&#62;</i>
    </a>
    <a href="">
      <li class="test active">Cozinha</li>
      <i class=" test">&#62;</i>
    </a>
    <a href="">
      <li class="test">Quarto</li>
      <i class="test">&#62;</i>
    </a>
    <a href="">
      <li class="test">Varanda</li>
      <i class=" test ">&#62;</i>
    </a>
</ul>

<h1>-------------------------</h1>

<ul>
    <a class="classA active" href="">
      <li >Banheiro</li>
      <i >&#62;</i>
    </a>
    <a class="classA" href="">
      <li >Cozinha</li>
      <i >&#62;</i>
    </a>
    <a class="classA" href="">
      <li >Quarto</li>
      <i >&#62;</i>
    </a>
    <a class="classA" href="">
      <li >Varanda</li>
      <i >&#62;</i>
    </a>
</ul>

Answer 1

I'm having a bit of trouble understanding what you want, so two answers for two different interpretations of your Q:

Applied to each Element Individually

Based on Mobly's site navbar , you would want to essentially apply a rule for each element via CSS and/or JS/Jquery (note these are two seperate approaches, you can use either/or, though the CSS approach would usually be preferred):

CSS (or you can just change color instead of opacity):

.test {
    color: black;
    opacity: 0.7;
    /* transition: opacity 0.5s; optional fun effect*/
}
.test:hover {
    /* this would essentially be your active class */
    opacity: 1.0;
}

JS Approach (w/Jquery; you can do it without Jquery, just more words to select):

$(".test").hover(function() {
    $(this).children().addClass("active");
}, function() {
  $(this).children().removeClass("active");
});

Using Siblings

CSS, standing for Cascading Style Sheets, cannot work backwards, but can work "sideways" to siblings. In CSS this is done with sibling selectors :

.test:hover, .test:hover ~ i {
    color: red;
}

JS

$(".test").hover(function() {
    $(this).addClass("active");
    $(this).siblings().addClass("active");
}, function() {
    $(this).removeClass("active");
    $(this).siblings().removeClass("active");
});

Persistency of Class

It is important that once an item has received the class 'active', it only backs to its original class when another item receives the hover and becomes 'active'

To add a persistent class that only changes when another element becomes active, remove the event handler for hoveroff and instead remove the active class of all elements with the .active class:

Example Jquery :

$(".test").hover(function() {
    $(".active").removeClass("active");
    $(this).addClass("active");
    $(this).siblings().addClass("active");
});

---

Other Recommendations

• Instead of the <ul> , use the more semantically correct <nav> with only <a> tags underneath.
• Use class instead of id; usually default to class unless you need id attribute.

NOTE TO OP: Let me know which sections actually helped answer your question specifically and I'll delete or strike through the rest.

Answer 2

<html>
  <span id="my-id" class="one">Element</span>

  <!-- Include jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(function() {
      // attach event handler so that when you hover over it you change the class
      $('#my-id').hover(function() {
        // first remove class "one"
        $(this).removeClass('one');

        // next add class "two"
        $(this).addClass('two');

        // OR if you want to add and remove the same class you can use toggle
        $(this).toggleClass('one'); // this will add "one" class if it is not there or remove it if it is there
      });
    });

  </script>
</html>

The reason your code isn't working is that all your elements are sharing the same id. Put the "diamond" ID into the class attribute and remove the ID attribute from your elements. ID is meant to be unique.

<ul>
  <a href="" >
    <li class="test active"</li>
    <i class="flaticon-right-arrow test activeI"></i>
    <i class="diamond flaticon-diamond"></i>
  </a>
  <a href="">
    <li class="test">Banheiro</li>
    <i class="flaticon-right-arrow testI "></i>
    <i class="diamond flaticon-diamond"></i>
  </a>
  <a href="">
    <li class="test">Cozinha</li>
    <i class="flaticon-right-arrow testI "></i>
    <i class="diamond flaticon-diamond"></i>
  </a>
</ul>

Answer 3

Check this link , you can learn there how to use .removeClass() .addClass() and .toggleClass() jQuery methods. I highly recommend you to use jQuery instead plain JavaScript.

But the way, if you want to change the color is more efficient to use CSS than JS, you use that as follow:

.class{
   color: red;
}
.class:hover {
   color:blue;
}

There all the elements that have the class .class will be red, but when you enter the mouse in the element it will be blue ;)