Javascript 图像覆盖在鼠标上方和鼠标高度？

我想在图像上加一个覆盖层，直到鼠标的高度

w3schools在这里有一个很好的图像叠加演示，这对我想要的有很大帮助

此处叠加高度定义为

.container:hover .overlay {
  height: 100%;
}

---

有没有办法定义高度，使其上升到图像的高度，假设鼠标位于图像上方？

您可以使用jQuery获得此行为

$（“div.container”）.mousemove（函数（e）{
var avatarImg=$（“#avatar”）；
var avatarPosition=avatarImg.offset（）；
var mousePositionX=e.pageX-avatarPosition.left；
var mouseposition=e.pageY-avatarPosition.top；
var overlayneweight=avatarImg.height（）-鼠标位置；
美元（“div.overlay”）。高度（overlayneweight）；
});
$（“div.container”）.mouseleave（函数（）{
$（“div.overlay”）。高度（0）；
});
.container{
位置：相对位置；
宽度：50%；
左边距：100px；
边缘顶部：100px；
边框：黑色实心1px；
}
#化身{
显示：块；
宽度：100%；
高度：自动；
}
.覆盖{
位置：绝对位置；
底部：0；
左：0；
右：0；
背景色：#008CBA；
溢出：隐藏；
宽度：100%；
身高：0；
过渡：放松；
}
.文本{
颜色：白色；
字体大小：20px；
位置：绝对位置；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}

从底部滑入覆盖层
将鼠标悬停在图像上以查看效果

你好，世界
你所说的“鼠标高度”是什么意思？你想用css来实现吗？或者任何工具现在我理解了你的问题，我不认为你可以只用CSS来完成你想在图像上叠加鼠标光标的高度？正确的