应用来自光标位置的悬停效果

Question

我需要在鼠标位置获取

中的悬停效果。 我有这个HTML和CSS。

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

我需要类似以下这样的效果：

我可以接受使用JS或jQuery来实现。

编辑

我有一个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>

但我希望这个圆圈的动画可以像第一个片段一样完成。

原始问题在这里

- user7611919

---

你是想让黑色圆圈跟随鼠标指针移动吗？ - haxxxton

不完全是这样，我尝试着在进入 div 时，让鼠标悬停效果出现在光标位置。 - user7611919

你可能需要使用JavaScript来完成这个任务，因为CSS中的hover事件只能应用静态样式。 - haxxxton

这里有一个类似的例子：http://jsfiddle.net/amaan/ZnVsf/。该方法使用碰撞框和纯CSS实现，添加许多div来检测光标位置。更好的方法是使用JavaScript，以下是一个示例：http://stackoverflow.com/questions/18581513/jquery-follow-mouse-curser-within-in-a-div-centered-on-page - pol

如果你愿意使用js解决方案，你应该在问题中加上js标签。 - Nenad Vracar

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>

- Nenad Vracar

---

只需移除 overflow: hidden。 - Nenad Vracar

当我这样做时，我没有像第一个片段那样得到悬停效果，只有圆圈可以从大圆中出现。 - user7611919

我不确定你的意思是什么。 - Nenad Vracar

没错，这样可以。而且你可以这样做，但只在灰色圆圈内显示黑色圆圈（就像我的第二个片段一样）。 - user7611919

哦，还有一件事，如果您没有将光标放在灰色圆圈中，您可以使黑色圆圈不出现吗？（抱歉 :)） - user7611919

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>

- Pugazh

Answer 3

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

- Muhammad

Answer 4

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>

- Chien_Khmt

---

可以的，請等幾分鐘。 - Chien_Khmt

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>

- Chien_Khmt