In the code below, I would like that when passing and removing the mouseover and mouseout ) on a li , change would be made only in the corresponding element to this li , in this case, the tags a and i within li , just as happens with the CSS of the code background and color of the i tag changed with hover ). The problem I now have is that when I trigger the event, instead of changing only the element within the li that the mouse is over at the moment, all elements are affected at once.
To get better follow the codepen link with the full code: link
Thanks if you can help.
function abc() {
var myLi = document.querySelectorAll('li'),
icons = document.querySelectorAll('li i'),
//MOUSEOVER
function changeI() {
'use strict';
if (icons.length) {
for (var i = 0; i < icons.length; i++) {
icons[i].style.fontSize = '2em';
}
}
}
//MOUSEOUT
function backI() {
'use strict';
if (icons.length) {
for (var i = 0; i < icons.length; i++) {
icons[i].style.fontSize = '1em';
}
}
}
if (myLi.length) {
for (var i = 0; i < myLi.length; i++) {
myLi[i].addEventListener("mouseover", changeI);
myLi[i].addEventListener("mouseout", backI);
}
}
}
abc();