我需要在光标位置的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>
