我需要在鼠标位置获取
中的悬停效果。
我有这个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>
但我希望这个圆圈的动画可以像第一个片段一样完成。
原始问题在这里