在鼠标悬停效果上显示/隐藏div的右上角，左上角，右下角，左下角

Question

我有一张带有图片的人员名单。我想在每个项目上悬停时显示每个人的描述 只有当我将鼠标悬停在图像上时，才能看到其他div中的描述。

现在重点是我要从特定角落展示说明divs 我曾尝试使用jQuery show/hide函数，但没有方向属性可以从角落显示它 它应该如何出现：

$(".persons li.one").mouseenter(function() {
  $(this).find('div').show("slide", {
    direction: "left"
  })
});

$(".persons li.one").mouseleave(function() {
  $(this).find('div').hide("slide", {
    direction: "left"
  })
})

Answer 1

为了控制动画开始或结束的哪个角落，将“div”定位为“绝对”，并使用“左”或“右”，“顶部”和“底部”属性来设置将保留哪个角落随着大小的变化不变。

示例（css）：

.persons li.one {position: absolute; bottom: 0px; right: 0px;}

将在div的右下角开始或结束动画。

和

.persons li.one {position: absolute; top: 0px; right: 0px;}

这将在div的右上角开始或结束动画，依此类推。

希望这有帮助。