Javascript 从光标位置应用悬停

我需要从光标位置在

div

中获得悬停效果

我有这个

html

和

css

.f{
宽度：200px；
高度：200px；
背景颜色：灰色；
位置：固定；
边界半径：100px；
}
s{
宽度：50px；
高度：50px；
背景色：黑色；
边界半径：100px；
保证金：75px 0px 0px 75px；
过渡：宽度1s，高度1s，边距1s；
}
s:悬停{
宽度：100px；
高度：100px；
背景色：黑色；
保证金：50px 0px 0px 50px；
}

---

这是一个jQuery解决方案

$（“div.f”）.mousemove（函数（e）{
$（'div.s'）.css({
左：e.clientX-28，
排名：e.clientY-24
});
});
.f{
宽度：200px；
高度：200px；
背景颜色：灰色；
位置：固定；
边界半径：100px；
/*如有必要，注释或移除溢出*/
溢出：隐藏；
}
s{
位置：绝对位置；
宽度：50px；
高度：50px；
背景色：黑色；
边界半径：100px；
}


函数移动内部（e）
{
var inner=document.getElementById（'inner'）；
internal.style.top=（e.clientY-100）+“px”；
internal.style.left=（e.clientX-100）+“px”；
}
.f{
宽度：200px；
高度：200px；
背景颜色：灰色；
位置：固定；
边界半径：100px；
}
s{
宽度：100px；
高度：100px；
背景色：黑色；
边界半径：100px；
保证金：75px 0px 0px 75px；
位置：绝对位置；
}
请将内部div置于父div之外
并为父div设置onmouseover以更改内部div的位置
要更改内圈的位置，可以在mousemove上使用
pageX
和
pageY
。要更改内圈的大小，您可以创建一个类，该类将
缩放
div，并将该类悬停在
.f
上进行切换


var s=$（'.s'）
变量f=$（'.f'）
var oTop=f.偏移量（）.顶部+（s.高度（）/2）；
var oLeft=f.偏移（）.左+（s.宽度（）/2）；
f、 悬停（函数（）{
s、 toggleClass（'change'）
})
f、 mousemove（函数（e）{
var x=e.pageY-oTop
变量y=e.pageX-oLeft
s、 css({
顶部：x+‘px’，
左：y+‘px’
})
})
.f{
宽度：200px；
高度：200px；
背景颜色：灰色；
位置：固定；
溢出：隐藏；
边界半径：100px；
}
s{
宽度：50px；
高度：50px；
背景色：黑色；
边界半径：100px；
位置：绝对位置；
指针事件：无；
不透明度：0；
过渡：变换0.5s线性，不透明度0.3s线性；
}
.改变{
变换：尺度（2）；
不透明度：1；
}


$（'.f'）。在（'mousemove'，函数（e）上{
var PAR＝$（这个）；
如果（（e.pageX=0）和&e.pageY=0）{
$（'.s'）.css({
位置：'相对'，
左：e.pageX-（第宽度（）/2页），
顶部：e.pageY-（部分高度（）/2）
});
}否则{
$（'.s'）.css({
位置：'首字母'
});
}
});
.f{
宽度：200px；
高度：200px；
背景颜色：灰色；
位置：固定；
边界半径：100px；
}
s{
宽度：50px；
高度：50px；
背景色：黑色；
边界半径：100px；
保证金：75px 0px 0px 75px；
过渡：宽度1s，高度1s，边距1s；
}
s:悬停{
宽度：100px；
高度：100px；
背景色：黑色；
保证金：50px 0px 0px 50px；
}


var ol_x=null；
var ol_y=null；
函数moveInner（me，e）
{
如果（ol_x！=null）
{
var ctx=me.getContext（“2d”）；
ctx.arc（olux，oluy，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（olux，oluy，40,0,2*Math.PI，false）；
ctx.fillStyle='black'；
ctx.fill（）；
ctx.stroke（）；
}
.f{
宽度：200px；
高度：200px；
背景颜色：灰色；
位置：固定；
边界半径：100px；
}
嗨，这是我的编辑解决方案

我使用2D上下文在父DIV中绘制内部DIV

您是否试图定位黑色圆圈，使其“跟随”光标？不完全是这样，我尝试在div中输入光标位置的悬停效果apear。您可能需要使用javascript执行此操作，因为CSS中的悬停事件只能应用静态样式。。这个方法是通过点击框和css来完成的，添加了很多div来检测光标的位置。一个更好的方法是使用javascript，如果你对js解决方案持开放态度，你应该用jsJust remove overflow:hidden标记你的问题。当我这样做时，我不会像第一个代码片段那样得到悬停效果，只有圆圈可以从大圆圈中出现。我不确定你的意思。Sry，我的英语很差。当我删除溢出：隐藏时，我没有得到预期的效果。我需要像我的问题中的悬停一样的效果第一个狙击手（黑色圆圈变大）。是的，这没问题。你可以这样做，但只在灰色的圆圈中显示黑色的圆圈（就像我的第二个片段）。是的，我可以，请等几分钟