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

时间:2013-11-06 07:48:45

标签: jquery show-hide mouseover

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

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

image

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

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

1 个答案:

答案 0 :(得分:0)

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

示例(css):

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

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

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

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

希望这有帮助。