1

PRIMERA VISTA DE LOS PRODUCTOS SE SUPONE QUE SUS DESCRIPCIONES SE DEBEN OCULTAR NI BIEN TERMINA DE CARGAR LA PAGINA

HACIENDO HOVER EN PRODUCTOS SE SUPONE QUE AL HACER HOVER EN LOS PRODUCTOS DEBERIA DE MOSTRARSE SU DESCRIPCION

**Además la descripción se muestra con una animación particular **

**y también se va con una animación particular **

*lo cual solo pasa cuando selección por ID y solo ocurre en el primer elemento *

Estuve investigando tooooooooodo, el día, probe seleccionar por ID por Clase, usar QuerySelectors, Buscar la forma de hacerlo cíclicamente, pero aún no consigo lo deseado que es esto:

Carga la página, y ningún producto tiene descripción, lo cual entiendo que equivale a que la misma esta con la propiedad visibility : hidden; Okey, luego, cuando se pasa el mouse por alguno de los productos, entonces:

1.- aparece la descripción con su respectiva animación. 2.- se cambia la propiedad de esa descripción a visibility: visible; (ya que la característica de la animación de salida oculta el elemento sin necesidad de esta propiedad)

por ultimo: cuando se sale afuera del elemento: ocurre la animación de salida que hace que la descripcion desaparezca sutilmente..

El punto es que si la propiedad visibility no se cambia a "visible" sacar el hover del producto, la descripción se desaparece bruscamente y no sutilmente, por eso es necesario que se mantenga como visible después de la primera interacción, y solo después de la primera. ☺♥

Tremendo caos todo esto, pero bueno, no encuentro solución, y es algo tan simple lo que necesito, dios santo

const producto = document.querySelectorAll(".productos");
const descripciones = document.querySelectorAll(".descripcion");

// REACCIONAR CUANDO EL MOUSE ESTA EN  EL PRODUCTO :
producto.addEventListener("mouseover", ()=>{
    descripciones.classList.add("text-in")    
    descripciones.classList.remove("text-out")
});

// REACCIONAR CUANDO EL MOUSE SE VA DEL PRODUCTO :
producto.addEventListener("mouseout", ()=>{
    descripciones.classList.add("text-out")
    descripciones.classList.remove("text-in")    
});

// OCULTAR DESCRIPCIONES CUANDO CARGA LA PAGINA.
const numeroDeProductos = descripciones.length;
function ocultar() {for (var i = 0; i < numeroDeProductos; i++) {descripciones[i].classList.add("ocultar");}}
window.addEventListener("load", ()=> {ocultar();});
</script>

<!-- SCRIPT OPCION 2 -->
<script>
const producto = document.querySelectorAll(".productos");
const descripciones = document.querySelectorAll(".descripcion");

// OCULTAR DESCRIPCIONES CUANDO CARGA LA PAGINA.
const numeroDeProductos = descripciones.length;
function ocultar() {for (var i = 0; i < numeroDeProductos; i++) {descripciones[i].classList.add("ocultar");}}
window.addEventListener("load", ()=> {ocultar();});


// REACCIONAR CUANDO EL MOUSE SE VA DEL PRODUCTO :
function mouseArriba() {
    descripciones.classList.add("text-in");    
    descripciones.classList.remove("text-out");
}// REACCIONAR CUANDO EL MOUSE ESTA EN  EL PRODUCTO :

function mouseAfuera() {
    descripciones.classList.add("text-in")    
    descripciones.classList.remove("text-out")
}
descripciones.forEach(element => {element.addEventListener("mouseover",mouseArriba)});
descripciones.forEach(element => {element.addEventListener("mouseout",mouseAfuera)});
.contenedorGrupal{
padding-top: 30px;
display: flex;
flex-wrap: wrap ;
justify-content: center;
}

.productos{
padding-bottom: 15px;
margin: 15px;
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
}

.productos:hover{
    background-color: rgba(236, 97, 139, 0.432);
    transition: 2s;
    transform: scale(1.2);    
    cursor: pointer;
}


.descripcion {    
    padding: 5px 35px;    
    white-space: wrap;
    overflow: hidden;
    text-align: center;    
}
.ocultar{visibility: hidden;}

.imgProducto{width: 150px;}

/*. aparece texto */

.text-in {animation: text-in 0.4s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;}
@keyframes text-in {
0% {
    filter: blur(12px);
    opacity: 0;
    
}
100% {
    filter: blur(0px);
    opacity: 1;
    visibility: visible; 
}
}


/*. desaparece texto */
.text-out {animation: text-out 0.3s cubic-bezier(0.600, 0.040, 0.980, 0.335) both;}
@keyframes text-out {
0% {
    filter: blur(0.01); 
}
100% {
    filter: blur(12px) opacity(0%);
    visibility: visible; 
    }
}
<section class="CONTENEDOR_TOTAL">
        <div class="contenedorGrupal">
            <article class="productos">
                <img class="imgProducto" src="/recursos/producto ejemplo.png" alt="">
                <h4 class="descripcion">Breve descripcion del producto</h4>
            </article>

            <article class="productos">
                <img class="imgProducto" src="/recursos/producto ejemplo.png" alt="">
                <h4 class="descripcion">Breve descripcion del producto</h4>
            </article>

            <article class="productos">
                <img class="imgProducto" src="/recursos/producto ejemplo.png" alt="">
                <h4 class="descripcion">Breve descripcion del producto</h4>
            </article>
        </div>
</section>

1 respuesta 1

2

Tienes varios errores, el más importantes es este:

const producto = document.querySelectorAll(".productos");

// REACCIONAR CUANDO EL MOUSE ESTA EN  EL PRODUCTO :
producto.addEventListener("mouseover", ()=>{
    descripciones.classList.add("text-in")    
    descripciones.classList.remove("text-out")
});

querySelectorAll devuelve una lista, por lo que tienes que realizar un foreach, algo así:

// REACCIONAR CUANDO EL MOUSE ESTA EN  EL PRODUCTO :
producto.forEach( function(){
 this.addEventListener("mouseover", ()=>{
    descripciones.classList.add("text-in")    
    descripciones.classList.remove("text-out")
});
});

Después dentro del foreach vas agregando el listener del evento a cada producto. Pero esto para mi es un lio inecesario, con colocar los eventos dentro de la etiqueta html te ahorras mil dolores de cabeza

<article class="productos" onmouseover="mouseInOut(this)" onmouseout="mouseInOut(this)">

function mouseInOut(el){
  const descripciones = el.querySelector(".descripcion");
  descripciones.classList.toggle("text-in");
  descripciones.classList.toggle("text-out");
}
.contenedorGrupal{
padding-top: 30px;
display: flex;
flex-wrap: wrap ;
justify-content: center;
}

.productos{
padding-bottom: 15px;
margin: 15px;
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
}

.productos:hover{
    background-color: rgba(236, 97, 139, 0.432);
    transition: 2s;
    transform: scale(1.2);    
    cursor: pointer;
}


.descripcion {    
    padding: 5px 35px;    
    white-space: wrap;
    overflow: hidden;
    text-align: center;    
}
.ocultar{visibility: hidden;}

.imgProducto{width: 150px;}

/*. aparece texto */

.text-in {animation: text-in 0.4s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;}
@keyframes text-in {
0% {
    filter: blur(12px);
    opacity: 0;
    
}
100% {
    filter: blur(0px);
    opacity: 1;
    visibility: visible; 
}
}


/*. desaparece texto */
.text-out {animation: text-out 0.3s cubic-bezier(0.600, 0.040, 0.980, 0.335) both;}
@keyframes text-out {
0% {
    filter: blur(0.01); 
}
100% {
    filter: blur(12px) opacity(0%);
    visibility: visible; 
    }
}
<section class="CONTENEDOR_TOTAL">
        <div class="contenedorGrupal">
            <article class="productos" onmouseover="mouseInOut(this)" onmouseout="mouseInOut(this)">
                <img class="imgProducto" src="https://logos-download.com/wp-content/uploads/2019/01/Stack_Overflow_Logo.png" alt="">
                <h4 class="descripcion text-out">Breve descripcion del producto</h4>
            </article>

            <article class="productos" onmouseover="mouseInOut(this)" onmouseout="mouseInOut(this)">
                <img class="imgProducto" src="https://logos-download.com/wp-content/uploads/2019/01/Stack_Overflow_Logo.png" alt="">
                <h4 class="descripcion text-out">Breve descripcion del producto</h4>
            </article>

            <article class="productos" onmouseover="mouseInOut(this)" onmouseout="mouseInOut(this)">
                <img class="imgProducto" src="https://logos-download.com/wp-content/uploads/2019/01/Stack_Overflow_Logo.png" alt="">
                <h4 class="descripcion text-out">Breve descripcion del producto</h4>
            </article>
        </div>
</section>

UPDATE: SOLUCIÓN SOLO CON CSS

Después de analizar bien lo que querías, la verdad es que no necesitas javascript ni animaciones. Solo con CSS usando hover y transiciones se puede lograr que creo que buscas

.contenedorGrupal{
padding-top: 30px;
display: flex;
flex-wrap: wrap ;
justify-content: center;
}

.productos{
padding-bottom: 15px;
margin: 15px;
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
 transition: 2s;
}

.productos:hover{
    background-color: rgba(236, 97, 139, 0.432);
   
    transform: scale(1.2);    
    cursor: pointer;
}


.descripcion {    
    padding: 5px 35px;    
    white-space: wrap;
    overflow: hidden;
    text-align: center; 
    transition: 2s;
     filter: blur(12px);
      opacity: 0;
    
}

.productos:hover .descripcion{
    filter: blur(0px);
    opacity: 1;

}
.ocultar{visibility: hidden;}

.imgProducto{width: 150px;}
<section class="CONTENEDOR_TOTAL">
        <div class="contenedorGrupal">
            <article class="productos">
                <img class="imgProducto" src="https://logos-download.com/wp-content/uploads/2019/01/Stack_Overflow_Logo.png" alt="">
                <h4 class="descripcion text-out">Breve descripcion del producto</h4>
            </article>

            <article class="productos">
                <img class="imgProducto" src="https://logos-download.com/wp-content/uploads/2019/01/Stack_Overflow_Logo.png" alt="">
                <h4 class="descripcion text-out">Breve descripcion del producto</h4>
            </article>

            <article class="productos">
                <img class="imgProducto" src="https://logos-download.com/wp-content/uploads/2019/01/Stack_Overflow_Logo.png" alt="">
                <h4 class="descripcion text-out">Breve descripcion del producto</h4>
            </article>
        </div>
</section>

2
  • Por favor @Yussef , una maravilla tus dos respuestas funcionan a la perfeccion, la verdad es que me lei tantas cosas y ninguna solucionaba mis problemas, que no sabia que hacer... Me recomendas algun tipo de lectura para poder comprender tus conocimientos y tu mirada, porque sinceramente si lo tubiera que haber resuelto solo, quizas no hubiese podido, te debo el cielo ♥
    – DEI
    el 2 nov. 2022 a las 1:57
  • Mira que me hiciste sonrojar. Lamentablemente no se me ocurre ningún recurso para recomendar. Pero cualquier problema que tenga lo publicas aquí y te ayudaremos. Mucha suerte en tu proyecto
    – Yussef
    el 2 nov. 2022 a las 13:47

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.