Apply hover from the cursor position

Question

I need get hover effect in a div from the cursor position.

I have this html and css

相关标签:

Answer 1

Here is a jQuery solution.

$("div.f").mousemove(function(e) {
  $('div.s').css({
    left: e.clientX - 28,
    top: e.clientY - 24
  });
});

.f {
  width: 200px;
  height: 200px;
  background-color: grey;
  position: fixed;
  border-radius: 100px;
  /* comment or remove the overflow if necessary */
  overflow: hidden;
}

.s {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: black;
  border-radius: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f">
  <div class="s"></div>
</div>

Answer 2

To change position of inner circle you can use pageX and pageY on mousemove. To change size of inner circle you can create one class that will scale div and toggle that class on hover over .f.

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>

Answer 3

function moveInner(e)
{
  var inner = document.getElementById('inner');
 
  inner.style.top = (e.clientY-100)+"px";
  inner.style.left= (e.clientX-100)+"px";
}

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

.s {
  width: 100px;
  height: 100px;
  background-color: black;
  border-radius: 100px;
  margin: 75px 0px 0px 75px;

  position: absolute;
}


Please put the inner div outside the parent div
And set the onmouseover for parent div to change inner div's position

<div class="f" id="parent" onmousemove="moveInner(event)">
  
</div><div class="s" id="inner"></div>

Answer 4

$('.f').on('mousemove', function(e){
var par = $(this);
  if((e.pageX <= par.width() && e.pageX >= 0) && e.pageY <= par.height() && e.pageY >= 0){
    $('.s').css({
       position: 'relative',
       left:  e.pageX - (par.width() / 2),
       top:   e.pageY - (par.height() / 2)
    });
    } else {
    $('.s').css({
      position: 'initial'
    });
    }
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f">
  <div class="s"></div>
</div>

Answer 5

var ol_x= null;
var ol_y= null;
function moveInner(me, e)
{
if(ol_x!=null)
{
var ctx = me.getContext("2d");
 ctx.arc(ol_x, ol_y, 42, 0, 2 * Math.PI, false);
 ctx.fillStyle='grey';
    ctx.fill();
    ctx.restore();
}
ol_x = e.clientX+20;
ol_y = e.clientY+20;
  var ctx = me.getContext("2d");
ctx.beginPath();
ctx.arc(ol_x, ol_y, 40, 0, 2*Math.PI, false);
ctx.fillStyle ='black';
ctx.fill();
ctx.stroke();

}

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

Hi this is my solution for EDIT<BR>
I use 2D context to draw inner DIV inside parent DIV

<canvas class="f" id="parent" onmousemove="moveInner(this, event)">
  
</canvas>