在鼠标悬停效果上从右上角、左上角、右下角、左下角显示/隐藏 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”定位到“absolute”，并使用“left”或“right”以及“top”和“bottom”属性来设置哪个角会停留随着大小的变化保持不变。

示例（css）：

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

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

和

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

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

希望这会有所帮助。