7

Tengo el siguiente html y css, quisiera que el efecto hover que tengo dentro del div hijo se pueda aplicar desde cualquier lugar del div padre y se propage desde allí mismo, esto es lo que tengo:

.f {
  width: 200px;
  height: 200px;
  background-color: grey;
  position: fixed;
  border-radius: 100px;
}

.s {
  width: 50px;
  height: 50px;
  background-color: black;
  border-radius: 100px;
  margin: 75px 0px 0px 75px;
  transition: width 1s, height 1s, margin 1s;
}

.s:hover {
  width: 100px;
  height: 100px;
  background-color: black;
  margin: 50px 0px 0px 50px;
}
<div class="f">
  <div class="s"></div>
</div>

Y más o menos esto es lo que quiero:

introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

PD: Ya sé que no soy Picasso ni un maestro en photoshop XD

3
  • Mira este enace, no he podido encontrar al menos que se pueda hacer solo con css enlace Commented el 7 mar. 2017 a las 2:53
  • No es posible sin javascript.
    – Ricky Ruiz
    Commented el 7 mar. 2017 a las 6:13
  • Sin js no es posible por lo que he estado mirando Commented el 7 mar. 2017 a las 7:15

2 respuestas 2

7

Te dejo un solucion con jquery, no he conseguido encontrar la forma de hacerlo solo con html y css

var s = $('.s')
var f = $('.f')
var oTop = f.offset().top + (s.height() / 2);
var oLeft = f.offset().left + (s.width() / 2);

f.hover(function() {
  s.toggleClass('change')
})

f.mousemove(function(e) {
  var x = e.pageY - oTop
  var y = e.pageX - oLeft

  s.css({
    top: x + 'px',
    left: y + 'px'
  })
})
.f {
  width: 200px;
  height: 200px;
  background-color: grey;
  position: fixed;
  overflow: hidden;
  border-radius: 100px;
}
.s {
  width: 50px;
  height: 50px;
  background-color: black;
  border-radius: 100px;
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: transform 0.5s linear, opacity 0.3s linear;
}
.change {
  transform: scale(2);
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f">
  <div class="s"></div>
</div>

4
  • Esto era exactamente lo que quería, muchísimas gracias
    – Jorius
    Commented el 7 mar. 2017 a las 12:58
  • Andoni: nótese que he rechazado tu sugerencia de modificación de la wiki de una etiqueta, pues no citas las fuentes. Tenlo en cuenta para futuras sugerencias, ¡gracias!
    – fedorqui
    Commented el 8 mar. 2017 a las 10:37
  • Ya me he fijado que lo habian rechazado y me he quedado un poco mosca con el asunto. Cuando hablas de fuentes a que te refieres exactamente? He añadido esas dos etiquetas ya que la repuesta aceptada lleva jquery. Aun asi agradezco que te hayas molestado en darme una explicacion. Un saludo Commented el 8 mar. 2017 a las 15:07
  • Andoni, recuerda usar @fedorqui si me contestas. Si no, no recibo notificación de que me contestaste (vi tu respuesta por casualidad, ahora). Más info en ¿Cómo funcionan las @respuestas en los comentarios?. En cuanto a la edición en sí, debiste mencionar de dónde la sacabas. Esto se hace utilizando referencias. Básicamente, copia (si no tiene copyright) y luego cita la fuente. ¡Gracias!
    – fedorqui
    Commented el 9 mar. 2017 a las 9:01
6

Lo que debes hacer es aplicar un manejador para el evento mouseover del padre, de manera que obtengas las coordenadas y puedas mover al hijo antes de aplicar la transición. No necesitas jQuery ni ninguna librería, con puro y liviano JavaScript lo puedes hacer en unas pocas líneas.

Ejemplo

let father = document.getElementById('f');
let child = document.getElementById('s');

father.addEventListener('mousemove', posicionate);

function posicionate(e) {
  let x = e.pageX - this.offsetLeft - 25;
  let y = e.pageY - this.offsetTop - 25;

  child.style.left = `${x}px`;
  child.style.top = `${y}px`;
  /* Solo para quitar el centrado por defecto */
  child.style.bottom = 'auto';
  child.style.right = 'auto';
}
.f {
  border-radius: 100px;
  background-color: grey;
  height: 200px;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 200px;
}

.s {
  background-color: black;
  border-radius: 100px;
  height: 50px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: width 1s, height 1s, margin 1s, opacity .7s;
  width: 50px;
}

.f:hover > .s {
  background-color: black;
  height: 100px;
  opacity: 1;
  width: 100px;
}
<div id="f" class="f">
  <div id="s" class="s"></div>
</div>

1
  • +1 de todas formas, muchas gracias
    – Jorius
    Commented el 7 mar. 2017 a las 14:12

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.