从光标位置应用悬停

本文介绍了从光标位置应用悬停的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我需要在光标位置的 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/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="ajax.googleapis/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="ajax.googleapis/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="f"> <div class="s"></div> </div>