<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
</head>
<style>
.box {
display: inline-block;
margin-right: 20px;
}
.demo {
width: 70px;
height: 70px;
display: none;
position: absolute;
background-color: red;
}
</style>
<body>
<div class="box">
<img src="https://picsum.photos/200" >
</div>
<div class="box">
<img src="https://picsum.photos/200" >
</div>
<div class="box">
<img src="https://picsum.photos/200" >
</div>
<div class="box">
<img src="https://picsum.photos/200" >
</div>
<div class="box">
<img src="https://picsum.photos/200" >
</div>
<div class="box">
<img src="https://picsum.photos/200" >
</div>
<script>
function offset(el) {
let top = el.offsetTop
let left = el.offsetLeft
while (el.offsetParent) {
el = el.offsetParent
top += el.offsetTop
left += el.offsetLeft
}
return {
left: left,
top: top
}
}
$(‘body‘).prepend(‘<div class="demo">good</div>‘)
$(document).on(‘mouseenter‘, ‘img‘, function(e) {
var x = e.target.getBoundingClientRect().x || Math.ceil(offset(e.target).left)
var y = e.target.getBoundingClientRect().y || Math.ceil(offset(e.target).top)
$(‘.demo‘).css({
display: ‘block‘,
left: x + ‘px‘,
top: y + ‘px‘
})
})
$(‘.demo‘).on(‘mousemove‘, function(e) {
$(‘.demo‘).css({
display: ‘block‘
})
})
$(‘.demo‘).on(‘click‘, function(e) {
$(‘.demo‘).css({
display: ‘block‘
})
console.log(3)
})
$(document).on(‘mouseleave‘, ‘img‘, function(e) {
$(‘.demo‘).css({
display: ‘none‘
})
})
</script>
</body>
</html>
