-1

When hovering over an li all of the li-elements turns into white. I only want the one li-element I am hovering on to turn into from text color black to white. What have I done wrong? 

slideArea.addEventListener("mouseover", function () {
    images.forEach(li => {

        li.style.color = `#fff`
        li.style.cursor = 'default'
        li.innerHTML = "- -"
    })
})
Krupal Panchal
  • 1,553
  • 2
  • 13
  • 26
Eric Sand
  • 49
  • 3
  • 1
    You need to grab only the element hovered over right now you are iterating through all the li elements and applying the hover style. Give each one an id to address it specifically. Or get it from the function `function(e)` the `e` should have the specific element. – Michael Nov 20 '19 at 13:11
  • 1
    Have you considered using CSS for this, which would probably be more performant and easier to implement? – David Thomas Nov 20 '19 at 13:19
  • 1
    _"What have I done wrong?"_ - for starters, you did not provide a _proper_ [mre]. No one here knows what `slideArea` or `images` refer to. (Yes, we could probably try and infer that, and maybe guess correctly - but that's besides the point.) – 04FS Nov 20 '19 at 16:01
  • you have applied css in every li element using forEach loop. should do as li:hover instead of iterating – Prabhunath Yadav Nov 26 '19 at 09:03

2 Answers2

1

Don't loop over the whole set of li and set their styles. You can target the specific element that was hovered by using the event target that triggered the event:

slideArea.addEventListener("mouseover", function (event) {
  //check we hovered over an li
  if(event.target.nodeName == "li"){
    event.target.style.color = `#fff`;
    //and so on
  }
});

Note you don't have to specifically use nodeName for the check. You could for instance check the class.

if(event.target.classList.contains("someclass")){

}
Patrick Evans
  • 41,991
  • 6
  • 74
  • 87
0

use css class with element <li> color change white only when cursor hover.

li:hover a {
  color: #fff;
  cursor = 'default';
}
Prabhunath Yadav
  • 185
  • 1
  • 14