-Buenas, tengo un problema al cual ya encontre la solucion, ahora solo me pregunto: por que surge este problema ...
const title__element = document.getElementsByClassName("initial__title")[0];
const titleLetterClassName = "title__letter"
const overTitleLetterClassName = "title__letter__overed"
for (letter of title__element.innerText) {
let new_letter = document.createElement("span");
new_letter.innerText = letter;
new_letter.classList.add(titleLetterClassName)
title__element.appendChild(new_letter);
}
title__element.removeChild(title__element.childNodes[0]);
for (child of title__element.children){
child.addEventListener("mouseenter", () => {
console.log(child);
child.classList.add(overTitleLetterClassName);
})
child.addEventListener("mouseleave", () => {
console.log(child);
child.classList.remove(overTitleLetterClassName);
})
}
#inicio{
height: 100vh;
width : 100vw;
background-color : #f00;
}
.initial__title{
padding : 30px;
}
.title__letter{
cursor : pointer;
transition : transform .5s;
}
.title__letter__overed{
transform : scale(1.4,1.4 );
}
.initial__title{
background-color : #0f0;
display : inline;
position : relative;
left : 40vw;
top : 20vh;
}
<!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">
<link rel="stylesheet" href="css.css">
<title>Document</title>
</head>
<body>
<h1 class="initial__title">Hola</h1>
<script src="js.js"></script>
</body>
</html>
Si ven los resultados en una consola, veran que todos los eventListeners
se aplicaron sobre el ultimo elemento del arreglo... La primera pregunta seria: por que child
(en el segundo bucle) siempre apunta al ultimo elemento del arreglo? La solucion a este problema seria declarar la variable con let
...
const title__element = document.getElementsByClassName("initial__title")[0];
const titleLetterClassName = "title__letter"
const overTitleLetterClassName = "title__letter__overed"
for (letter of title__element.innerText) {
let new_letter = document.createElement("span");
new_letter.innerText = letter;
new_letter.classList.add(titleLetterClassName)
title__element.appendChild(new_letter);
}
title__element.removeChild(title__element.childNodes[0]);
for (/* aca ----> */ let child of title__element.children){
child.addEventListener("mouseenter", () => {
console.log(child);
child.classList.add(overTitleLetterClassName);
})
child.addEventListener("mouseleave", () => {
console.log(child);
child.classList.remove(overTitleLetterClassName);
})
}
Y la segunda pregunta (a la cual no he encontrado solucion) es : por que el transform : scale()
no funciona?