Changing colors when hovering the mouse

Question

Changing colors when hovering the mouse

Asked 4 years, 10 months ago

Viewed 1,295 times

1

The following code is able to perform the following task:

By clicking the "Create Square" button, a red square is rendered on the screen at each click.

I wish that, when passing the mouse over these generated squares, these change color.

Follows the code :

<html>
      <head>
        <meta charset="UFT-8" />
        <title></title>
      </head>

      <body>
        <div id="container"></div>
        <button type="button" onclick="criarQuadrado()">Criar quadrado</button>
        <script>
          function criarQuadrado() {
            var boxElement = document.createElement("div");
            boxElement.style.width = 300;
            boxElement.style.height = 300;
            boxElement.style.display = "inline-block";
            boxElement.style.backgroundColor = "#f00";

            var container = document.getElementById("container");
            container.appendChild(boxElement);
          }
    </script>
      </body>
    </html>

The function either will be responsible for generating the color changes is as follows :

function getRandomColor() {
        var letters = "0123456789ABCDEF";
        var color = "#";
        for (var i = 0; i < 6; i++) {
          color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
}
var newColor = getRandomColor();

How can I solve such a problem?

You and you must associate the color change function to the onfocus event.

– anonimo

2019/08/08 at 13:24
But the color change is permanent or should take effect only while the user has the mouse over the square ?

– Isac

2019/08/08 at 14:31

2 answers

Browser other questions tagged javascript css colors render

You are not signed in. Login or sign up in order to post.

by Luan Brito • **279** points · Answer 1 · 2019-08-08T13:37:40+00:00

Follow code below, tested and every time you put the mouse on top of the square it changes color, I do not know if this is exactly what you want, but it is already a way to get there.

<html>
  <head>
    <meta charset="UFT-8" />
    <title></title>
  </head>

  <body>
    <div id="container"></div>
    <button type="button" onclick="criarQuadrado()">Criar quadrado</button>
    <script>
      function criarQuadrado() {
        var boxElement = document.createElement("div");
        boxElement.style.width = 300;
        boxElement.style.height = 300;
        boxElement.style.display = "inline-block";
        boxElement.style.backgroundColor = "#FF0000";
        boxElement.addEventListener('mouseover', function(){
            var letters = "0123456789ABCDEF";
            var color = "#";
            for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
            }
            return this.style.background = color;
        });

        var container = document.getElementById("container");
        container.appendChild(boxElement);
      }
</script>
  </body>
</html>

by Hugo Neves • 11 points · Answer 2 · 2019-08-08T12:54:39+00:00

If I get it, you want to change the colors when passing the mouse, right?

I believe you have to create a function that takes the value of getRandomColor() and compare her.. kind of like this:

function mudarDeCor(){
          if(newColor === newColor){
            newColor = getRandomColor();
            return newColor;
          } 
        }

I believe that’s how it is. Take the test