我需要在 div
中从光标位置获得悬停效果。
我有这个 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>
但我需要圆圈像第一个片段一样制作结束动画。
原始问题 here
最佳答案
要更改内圆的位置,您可以在 mousemove 上使用 pageX
和 pageY
。要更改内圆的大小,您可以创建一个将缩放
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>
关于javascript - 从光标位置应用悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42644776/