1

Tengo tres Divs y lo que planeo hacer es que cuando pase el mouse sobre cualquier caja el titulo de esta cambie de color.

En esta caso ya tengo la programación hecha de loa anterior, lo único que me falta es que lo haga en las 3 por que solo lo hace en la primera caja, pero no se por que se deba y como es que pueda solucionar el error, por favor me podrían ayudar

let content = document.querySelector('.contenedor');
let btn = document.querySelector('.title');

content.addEventListener('mouseover', (e) => {
  btn.className = 'change';
});
content.addEventListener('mouseout', (e) => {
  btn.className = 'title';
});
.contenedor {
  width: 150px;
  height: 200px;
  border: 2px solid red;
  text-align: center;
  padding: 5px;
}

.title {
  color: orange;
}
.change {
  color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  
<div class="contenedor">
<h3 class="title">Box 1</h3>
<p>Texto que ejemplifica un parrafo</p>
</div>
<div class="contenedor">
<h3 class="title">Box 2</h3>
<p>Aquí no realiza el cambio</p>
</div>
<div class="contenedor">
<h3 class="title">Box 3</h3>
<p>Aquí no realiza el cambio</p>
</div>
  
</body>
</html>

1
  • 1
    Porque no usas hover, propiedad de css?
    – EvilFearzZ
    el 11 ago. 2022 a las 17:50

1 respuesta 1

3

Te funciona solo con un elemento porque querySelector() devuelve solo el primer elemento que encuentra. Debes usar querySelectorAll() para obtener todos y recorrer con un ciclo para asignar los eventos.

// Obtener todos los contenedores
let contents = document.querySelectorAll('.contenedor');

// Recorrer en ciclo
contents.forEach(content => {
    // Asignar eventos
    content.addEventListener('mouseover', e => {
        // Desde el contenedor (e.currentTarget)
        // Obtener el elemento <h3> y cambiar clase
        e.currentTarget.querySelector('h3').className = 'change';
    });
    content.addEventListener('mouseout', e => {
        e.currentTarget.querySelector('h3').className = 'title';
    });
});
.contenedor {
  width: 150px;
  height: 200px;
  border: 2px solid red;
  text-align: center;
  padding: 5px;
}

.title {
  color: orange;
}
.change {
  color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  
<div class="contenedor">
<h3 class="title">Box 1</h3>
<p>Texto que ejemplifica un parrafo</p>
</div>
<div class="contenedor">
<h3 class="title">Box 2</h3>
<p>Aquí no realiza el cambio</p>
</div>
<div class="contenedor">
<h3 class="title">Box 3</h3>
<p>Aquí no realiza el cambio</p>
</div>
  
</body>
</html>

Pero, no necesitas Javascript para eso, con CSS puedes lograrlo muy fácilmente con la propiedad :hover

.contenedor {
  width: 150px;
  height: 200px;
  border: 2px solid red;
  text-align: center;
  padding: 5px;
}

.title {
  color: orange;
}

/* Aplicar hover en contenedor y modificar solo el título */
.contenedor:hover .title {
  color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  
<div class="contenedor">
<h3 class="title">Box 1</h3>
<p>Texto que ejemplifica un parrafo</p>
</div>
<div class="contenedor">
<h3 class="title">Box 2</h3>
<p>Aquí no realiza el cambio</p>
</div>
<div class="contenedor">
<h3 class="title">Box 3</h3>
<p>Aquí no realiza el cambio</p>
</div>
  
</body>
</html>

1
  • Muchas gracias por la ayuda, la verdad es que si lo había pensado realizar así con CSS, pero quería tratar de hacerlo con JS para ir desarrollando un poco más mis habilidades en dicho lenguaje, muchas gracias amigo el 11 ago. 2022 a las 18:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.