Para lograr este efecto aparecer y desaparecer con opacidad, se usa:
- Con CSS el pseudoelemento
:hover
- 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>