I need get hover effect in a div
from the cursor position.
I have this html
and css
Here is 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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f">
<div class="s"></div>
</div>
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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f">
<div class="s"></div>
</div>
function moveInner(e)
{
var inner = document.getElementById('inner');
inner.style.top = (e.clientY-100)+"px";
inner.style.left= (e.clientX-100)+"px";
}
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
border-radius: 100px;
}
.s {
width: 100px;
height: 100px;
background-color: black;
border-radius: 100px;
margin: 75px 0px 0px 75px;
position: absolute;
}
Please put the inner div outside the parent div
And set the onmouseover for parent div to change inner div's position
<div class="f" id="parent" onmousemove="moveInner(event)">
</div><div class="s" id="inner"></div>
$('.f').on('mousemove', function(e){
var par = $(this);
if((e.pageX <= par.width() && e.pageX >= 0) && e.pageY <= par.height() && e.pageY >= 0){
$('.s').css({
position: 'relative',
left: e.pageX - (par.width() / 2),
top: e.pageY - (par.height() / 2)
});
} else {
$('.s').css({
position: 'initial'
});
}
});
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f">
<div class="s"></div>
</div>
var ol_x= null;
var ol_y= null;
function moveInner(me, e)
{
if(ol_x!=null)
{
var ctx = me.getContext("2d");
ctx.arc(ol_x, ol_y, 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(ol_x, ol_y, 40, 0, 2*Math.PI, false);
ctx.fillStyle ='black';
ctx.fill();
ctx.stroke();
}
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
border-radius: 100px;
}
Hi this is my solution for EDIT<BR>
I use 2D context to draw inner DIV inside parent DIV
<canvas class="f" id="parent" onmousemove="moveInner(this, event)">
</canvas>