0

Tengo una serie de elementos a y dentro de ellos un div con información y otro div a la derecha con un texto e icono, quiero que cuando haga hover en cada uno de los elementos a eliminar la clase que mantiene oculto su div de la derecha. Lo hice con jquery pero cuando hago el hover en un elemento me elimina la clase de todos los div de todos los elementos, ¿cómo podría hacer para que me elimine solo la clase del elemento donde estoy haciendo el hover?

Aquí mi html

<div>
  <a class="single-mail">
    <div>
      <p>Bloqueo Financiero</p>
      <span class="notification"><small>10 días</small></span>
    </div>
    <div class="detail hddn" style="float: right; display: inline-block">
      <p>Revisar</p>
      <span><img src="img/icono_revisar.png"/></span>
    </div>
  </a> 

  <a class="single-mail">
    ....
  </a>
</div>

En Css solo tengo una opacity para el div, para que se mantenga oculto

.single-mail .hddn {
  opacity: 0;
}

Y mi jquery

<script type="text/javascript">
  $('.single-mail').hover(
    function() {$('.detail').removeClass('hddn')},
    function() {$('.detail').addClass('hddn')}
   )
</script>
2
  • No se termina de entender tu pregunta, puedes editar y ser mas específica por favor?
    – user128299
    Commented el 29 mar. 2020 a las 1:01
  • Estas menajendo el evento referenciando a una clase por lo que pueden haber N elementos en tu DOM que tengan esa clase. Si quieres manejar divs individualmente haz la referencia con ids no clases ;) Commented el 29 mar. 2020 a las 1:02

2 respuestas 2

0

//No entiendo muy bien que es lo que pretendes hacer, si quieres que al hacer hover en un elemento se altere otro puedes hacer lo siguiente

.hddn {
  opacity: 0;
}

.single-mail:hover .hddn {
  opacity: 1;
 }

//Te ahorrarías escribir código jquery

1
  • te recomiendo que si no entiendes bien lo que quiere hacer el OP no respondas la pregunta y pidas aclaraciones en la sección de comentarios. De esta forma puedes tener un análisis más profundo y por ende una respuesta más acertada 😁 Commented el 29 mar. 2020 a las 1:04
0

Para lograr este efecto aparecer y desaparecer con opacidad, se usa:

  1. Con CSS el pseudoelemento :hover
  2. Con jQuery se usa mouseover y mouseleave

Con CSS (lo cual está comentado en el ejemplo) es lo siguiente:

.hddn {
    opacity: 0;
    visibility: hidden
} .single-mail:hover .hddn {
    opacity: 1;
    visibility: visible
}

Con el uso de jQuery es:

$(document).on("mouseover", function() {

    //Mostrar  

}).on("mouseleave", function() {
 
    // Ocultar
     
});

Modifique algunos detalles del HTML para mejorar algunas cosas, deduciendo algunos de tu estructura o diseño.

Por ejemplo, una imágen no debe incluirse en una etiqueta span. Se debe incluir en un div. Los span solamente es para texto.

A algunos div le puse una clase.

            
$(document).ready(function() { 

    const donde = $(".single-mail"); 
    const este = $(".hddn"); 

    $(donde).on("mouseover", function() {
 
       $(this).find(este).addClass("visible"); 

    }).on("mouseleave", function() {
  
       $(this).find(este).removeClass("visible"); 

    }); 

});
* {
box-sizing: border-box
}

html, body {
margin: 0;
padding: 0;
min-height: 100%
}

a {
text-decoration: none
}

.item {
display: block;
max-width: 400px;
margin-bottom: 1rem
}

.single-mail {
display: inline-flex;
max-width: 100%;
height: 150px;
margin: 20px 0;
background-color: grey
}

.detail, .hddn {
display: inline-block;
padding: .50rem;
transition: all 0.3s ease-in-out
} .detail {
background-color: violet
}

.hddn {
background-color: lightblue;
opacity: 0;
visibility: hidden
} 
/* sin jQuery */
/*.single-mail:hover .hddn { 
opacity: 1;
visibility: visible
}*/

 /* con jQuery */
.hddn.visible {
opacity: 1;
visibility: visible
}

.hddn img {
display: block;
height: 100%;
object-fit: cover
}
            
            
<div class="item"> 
        <a class="single-mail"> 
            
            <div class="detail"> 
                
                <p>Bloqueo Financiero</p> 
                
                <span class="notification"><small>10 días</small>
                    
                </span> 
            </div> 
            
            <div class="detail hddn"> 
                
                <p>Revisar</p> 
                
                <img src="img/icono_revisar.png"/> 
                
            </div> 
        </a>
        
        <a class="single-mail"> 
            
            <div class="detail"> 
                
                <p>Bloqueo Financiero</p> 
                
                <span class="notification"><small>10 días</small>
                    
                </span> 
            </div> 
            
            <div class="detail hddn"> 
                
                <p>Revisar</p> 
                
                <img src="img/icono_revisar.png"/> 
                
            </div> 
        </a>
        
    </div>
    
    <div class="item"> 
        <a class="single-mail"> 
            
            <div class="detail"> 
                
                <p>Bloqueo Financiero</p> 
                
                <span class="notification"><small>10 días</small>
                    
                </span> 
            </div> 
            
            <div class="detail hddn"> 
                
                <p>Revisar</p> 
                
                <img src="img/icono_revisar.png"/> 
                
            </div> 
        </a>
        
        <a class="single-mail"> 
            
            <div class="detail"> 
                
                <p>Bloqueo Financiero</p> 
                
                <span class="notification"><small>10 días</small>
                    
                </span> 
            </div> 
            
            <div class="detail hddn"> 
                
                <p>Revisar</p> 
                
                <img src="img/icono_revisar.png"/> 
                
            </div> 
        </a>
        
    </div>

<script src="https://code.jquery.com/jquery-3.6.3.js"></script>

            

Tu Respuesta

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

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