Home / Questions / 53560
Accepted
Jorius
Asked: 2020-03-07 18:15:09 +0800 CST 2020-03-07 18:15:09 +0800 CST

Hover from cursor position

  • 772

I have the following htmland cssI would like the effect hoverthat I have inside the div child to be able to be applied from anywhere in the div parent and propagate from there, this is what I have:

.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>

And more or less this is what I want:

enter image description here enter image description here

PS: I know I'm not Picasso or a photoshop master XD

javascript

2 Answers

  1. Best Answer

    I leave you a solution with jquery, I have not been able to find a way to do it only with html and 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>

    • 7

  2. What you need to do is apply a handler to the mouseoverparent's event so that you get the coordinates and can move the child before applying the transition. You don't need jQuery or any library, with pure and lightweight JavaScript you can do it in a few lines.

    Example

    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>

    • 6