We Keep Coding

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

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.
p.s. 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 ">></i>
</a>
<a href="">
<li class="test active">Cozinha</li>
<i class=" test">></i>
</a>
<a href="">
<li class="test">Quarto</li>
<i class="test">></i>
</a>
<a href="">
<li class="test">Varanda</li>
<i class=" test ">></i>
</a>
</ul>
<h1>-------------------------</h1>
<ul>
<a class="classA active" href="">
<li >Banheiro</li>
<i >></i>
</a>
<a class="classA" href="">
<li >Cozinha</li>
<i >></i>
</a>
<a class="classA" href="">
<li >Quarto</li>
<i >></i>
</a>
<a class="classA" href="">
<li >Varanda</li>
<i >></i>
</a>
</ul>

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.

<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>

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 ;)

How can I set an attributes (base on child attributes) in jQuery or JavaScript?

I want to set an attribute on hover, based on his child attributes, by using jQuery. I have tried many ways to make this, but no luck. All attributes are same and not changing on hover.
<li class="menu-item">
<a data-src="" class="menu-item-link" href="#">Item one</a>
<span class="description">
<img src="https://i.ibb.co/LxSKFgH/image1.jpg">
</span>
</li>
<li class="menu-item">
<a data-src="" class="menu-item-link" href="#">Item two</a>
<span class="description">
<img src="https://i.ibb.co/TLJL7hq/image2.jpg">
</span>
</li>
What I want is when I hover on .menu-item I want to set .description's img attribute on data-src attribute for each menu. That means Attribute must set on his parent attribute.

You can achieve what you want by executing the following jQuery script:
$(".menu-item").hover(function(){
//Take the src value from the inner img tag
let srcValue = ($(this).find("img").attr("src"));
//Set the data-src attribute of the inner anchor tag
$(this).find("a").attr("data-src", srcValue);
});

How to Select the last 'li' which is changing dynamically for each run in the 'Ul' Using selenium driver

<ul class="drillDownMenu l_drillDown" style="left: -498px;">
<li class="hasSubs">
<a id="RAL10" href="javascript:;">
<ul class="active">
<li class="hasSubs">
<li class="hasSubs">
<a id="AL101117" href="javascript:;">AR Invoices</a>
<ul class="displayed active">
<li>
<a id="FAL10111726" onclick="LoadQueryWindow(this,'104')">AR Invoices</a>
</li>
<li>
<a id="FAL10111727" onclick="LoadQueryWindow(this,'134')">All AR Invoices 1</a>
</li>
</ul>
</li>
I am trying to use the below driver statement,
driver.findElement(By.xpath("//*[contains(#id,'FAL10111727')]")).click();
But this selects the first element, I want to select the last element in the list.
Thanks

Try this xpath expression:
(//ul[ #class='drillDownMenu l_drillDown']//li)[last()]
it picks all li elements that are childs of the topmost ul, then picks the last element from the whole set.

As per the HTML you have shared,
To select the last 'li' which is changing dynamically for each run, All AR Invoices 1 in this case you can use :
driver.findElement(By.xpath("//ul[#class='displayed active']//following::li[last()]")).click();
But, I suppose the <li> tags won't receive a click and you have to invoke click() method on the inner <a> tag instead as follows :
driver.findElement(By.xpath("//ul[#class='displayed active']//following::li[last()]/a")).click();

//I tried using this which worked
driver.findElement(By.cssSelector("ul.displayed li:last-child a")).click();

active item li on menu where hover

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="topbar">
<ul>
<li class="active">
About Us
</li>
<li>
Services
</li>
<li>
Gallery
</li>
<li>
Get Quote
</li>
</ul>
</div>
How to set class Active on li 2,3,4... where hover, and remove class active has a go
Thank you!

Unless you need it to be active for some kind of query down the line (I personally don't know why you would, though), try CSS.
li:hover {
// Active class CSS here
}
You can add further selectors to the li to keep yourself from selecting other lists on the page, and it doesn't take any JavaScript, JQuery, or fancy coding.
The :hover psuedo-selector will make it where it applies the CSS to the element that you're hovering over.

How to toggle between classes of respective span when using slidetoggle?

I am sliding content when the corresponding header is clicked using slidetoggle. Now I want to toggle between classes simultaneously.
I can use toggleclass and have all of the classes toggled irrespective of which one of the header is clicked, but I'm having trouble in toggling only the class corresponding to the headerclicked.
Here is my code:
<div class="Title ">
<a class="Expanded" href="#">Title1<span id="span1" class="ArrowDown"></span></a>
</div>
<ul class="Content">
<a href="#">
<li class="selected">hello1</li></a> <a href="#">
<li>hello2</li></a>
</ul>
<div class="Title">
<a class="Expanded" href="#">Title2<span id="span2" class="ArrowDown"></span> </a>
</div>
<ul class="Content">
<a href="#">
<li>hello3</li></a>
<a href="#">
<li>hij</li></a>
</ul>
Here is my script:
$(document).ready(function(){
$(".Title").click(function(){
$(this).next(".Content").slideToggle("slow");
$("#span1").toggleClass("ArrowUp", "ArrowDown");
});
});
I just put the id of the first span here, but I tried different things, but couldn't figure out what to do... I want the class of span toggled between ArrowUp and ArrowDown when the corresponding title is clicked (expanded or collapsed).

You can also use the power of jQuery chaining to write this in a single line like so.
$(this).find('span').toggleClass("ArrowUp", "ArrowDown").end()
.next(".Content").slideToggle("slow")
;
The two things to note in this are .find() (which gets the descendants of matched elements filtered by a selector) and .end() (which ends the most recent filtering operation in the current chain and returns the set of matched elements to its previous state.)

In the click callback function, make use of the this keyword, and combine it with the power of the .find() method.
example:
$('element').click(function() {
$(this).find('span').toggleClass('myclass');
});

$(this).find(' span').toggleClass("ArrowUp", "ArrowDown");