Cursor hover doesn't work

JavaScript
1 
  <div class="btn">
    <button id="bu1" class="btn__inner">КНОПКА-1</button>
    <button id="bu2" class="btn__inner">КНОПКА-2</button>
    <button id="bu3" class="btn__inner">КНОПКА-3</button>
  </div>

document.querySelector(".btn__inner").addEventListener("mouseover", btn);
function btn() {
  for (let i = 0; i < 3; i++){

  document.querySelector(".btn__inner")[i].style.color = "red";

  }
   
}
btn();

Here is a simple code that needs to be highlighted when you hover over a button, the text color is red, of course it’s very difficult to do this in Javascript, I personally don’t know how,
Of course, this can be done in styles very simply and easily, but here they say that Javascript is a simple language, but how simple is it???

2

Surely that’s the point?

CSS is the way to style items, so use that. JavaScript was not designed for that purpose, so while it may be possible to use it that way, it’s the wrong tool for the job.

Just because you can knock a nail in with a spanner doesn’t make it a useful substitute for a hammer. :slight_smile:

3 Likes
4

TechnoBear is right and using CSS the styling of the buttons is so much easier.

An example from a game I developed.

.buttonStyle {
    background-color: #4caf50; /* green */
    color: white;
    border: none;
    padding: 0.625em;
    text-align: left;
    text-decoration: none;
    display: inline-block;
    font-size: 1em;
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 0.3125em;
    width: 100%;
    margin-bottom: 0.625em;
}

.buttonStyle:hover {
    background-color: white;
    color: black;
    border: 2px solid #4caf50;
}
1 Like
5

Pretty simple if you do it properly:

document.querySelectorAll(".btn__inner").forEach((item) => {
  item.addEventListener("mouseover", (event) => {
    item.style.color = "red";
  });
  item.addEventListener("mouseout", (event) => {
    item.style.color = "black";
  });
});

Note I assumed you were doing a complete ‘hover effect’ as your code (if it had worked) would only have changed the color on mouseover. You did nothing about the mouseout.

Note that document.querySelector(".btn__inner") selects only ONE item so you were applying the event listener to the first item and not all the buttons (had you somehow managed to target it correctly anyway).

If you add “All” then you get a collection of all those elements. e.g. document.querySelectorAll(".btn__inner") . You would then have to loop through each one to apply the event listener (as in my code).

As others have said you don’t do this sort of thing in JS anymore as its is pointless when css does it in one line. (It’s good if it’s just for practice but nought else.)

6

To sort of merge your code and Pauls (using a separate function):

document.querySelectorAll(".btn__inner").forEach(item => {   
  item.addEventListener("mouseover", btn);
});
function btn(event) { 
  //an EventListener function should catch the 'event' argument, even if it doesnt use it...
  this.style.color = "red";
  //note that in an event handler function, "this" refers to the element that triggered the event.
}
2 Likes
7

Yes, everything became clear to me.

1 Like
8

As an alternative, you may consider using mouseenter and mouseleave instead. Just replace ‘mouseover’, with ‘mouseenter’ and ‘mouseout’, with ‘mouseleave’.

mouseover and mouseout events bubble. Simply put if you have children elements inside your button, for instance a span it will fire on those elements too and may not give the results you are looking for.

<button id='btn-over-1' class='btn__over'>
  <span>Text</span>
</button>

button-bubble
button-bubble631×510 28 KB

You can read up a bit more about bubbling here

Here is an example that hopefully illustrates this. If you hover over the inner spans you will see the difference in behaviour.

3 Likes