从光标位置悬停应用

Question

我需要从光标位置div获得悬停效果。

我有html和css

＆＃13;

＆＃13;

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

＆＃13;

<div class="f">
  <div class="s"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

我需要这样的事情：

我对js或jquery解决方案持开放态度。

修改

我有一个jquery解决方案：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但是我需要圆圈制作像第一个片段一样的过度动画。

原始问题here

Answer 1

要更改内圈的位置，您可以在mousemove上使用pageX和pageY。要更改内圈的大小，您可以创建一个scale div的类，并在悬停在.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 2

这是一个jQuery解决方案。

$("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 3

＆＃13;

＆＃13;

$('.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'
    });
    }
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

＆＃13;

＆＃13;

.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

＆＃13;

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

＆＃13;

while i<df.shape[0]

＆＃13;

＆＃13;

＆＃13;

Answer 5

＆＃13;

＆＃13;

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();

}

＆＃13;

.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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;