从光标位置应用悬停 [英] Apply hover from the cursor position

问题描述

我需要在光标位置的 div 中获得悬停效果。

我有 html 和 css

  .f {width：200px; height：200px;背景颜色：灰色;位置：固定; border-radius：100px;} .s {width：50px; height：50px;背景颜色：黑色; border-radius：100px; margin：75px 0px 0px 75px;过渡：宽度1s，高度1s，边距1s;}。s：hover {width：100px; height：100px;背景颜色：黑色; margin：50px 0px 0px 50px;}  

< div class = F > < div class =s>< / div>< / div>

我需要这样的东西：

div>

要改变内圈的位置，你可以在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;背景颜色：灰色;位置：固定;溢出：隐藏; border-radius：100px;} .s {width：50px; height：50px;背景颜色：黑色; border-radius：100px;位置：绝对;指针事件：无;不透明度：0;转换：转换0.5s线性，不透明度0.3s线性;}。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>

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

I have this html and 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>

And I need something like this:

I'm open to js or jquery solutions.

EDIT

I have 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>

But i need the circle make the over animation like first snippet.

Original question here

解决方案

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>

这篇关于从光标位置应用悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！