0

soy nuevo en Jquery y estoy diseñando un Portafolio con Html y Boostrap5.

Y quiero hacer lo siguiente:

Tengo 3 divs en el DOM y todas tienen la misma clase

<body>
  <div class="caja">1</div>
  <div class="caja">2</div>
  <div class="caja">3</div>
 </body>

Mi idea es que: al pasar el cursor (hover) sobre un div cualquiera, se agregue un elemento, en este caso quiero agregar un icono, e tratado con jquery pero no se mucho de programación; pienso que se tendria que recorrer cada uno de los elementos con un 'each' y con append(); agregarle un elemento con sus respectivas clases pero no me sale nada y ya estoy estresado, alguien me puede ayudar?

1 respuesta 1

0

Usando Jquery puedes insertar o remover facilmente un elemento cuando el cursor está encima:

$(".caja").hover(
  function(){
    $(this).append("<i class='fa fa-arrow-left'></i>")
   },
  function(){
    $(this).children("i").remove();
  }
)
div {
  font-size: 40px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="caja">1 </div>
<div class="caja">2 </div>
<div class="caja">3 </div>

Puedes lograr lo mismo simplemente usando solo CSS:

div.caja{font-size: 60px;}

div.caja i{
  opacity: 0;
  transition-duration: .3s;
}

div.caja:hover > i{
  opacity: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="caja">1 <i class="fa fa-css3"></i></div>
<div class="caja">2 <i class="fa fa fa-html5"></i></div>
<div class="caja">3 <i class="fa fa-github"></i></div>

1

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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