如何在特定位置滑出div

Question

我有一个div，当标签悬停在上面时我会滑出来。

HTML：

<div class="cellDataViewTdmStatus divCell userSitesCol7">
    <label class="lblViewTdmStatus">View Status</label>
</div>


<div id="tdmStatus" class="hidden flyout">
    LOREM IPSUM DOLOR SIT AMET<br>
    Blah blah blah
</div>

这是标签的div在页面上的样子（注意右侧的“查看状态”文本 - 这是上面代码中的标签）：

CSS：

.hidden { display: none; }

.flyout {
width: 560px;
height: 56px;
background-color: #EFF7DF;
padding: 10px;
margin: 0;
border-radius: 10px;
border: solid 1px #CC6600;
position: fixed;
overflow: hidden;
z-index: 10000;
top: 100px;
right: 300px;   }

JS：

$('.lblViewTdmStatus').hover(function() {
    $('.flyout').toggle("slide", {direction:'right'});
});

当标签悬停时，此函数根据需要（从隐藏中滑出）。

我需要将div滑出，使其看起来像是来自“查看状态”标签左侧的边框。

此外，这是一个表格，其中每一行都有一个悬停在上面的标签，所以我需要滑动div滑动到点击标签的左侧。

Answer 1

想出来，感谢普特万德在正确方向上的推动。

我刚查看了点击标签的position.left和position.top值，然后调整了该值，直到它定位到我想要的位置（点击标签的左侧）。我还必须从CSS中删除“顶部”和“右侧”属性。

这是新的js代码：

$('.lblViewTdmStatus').hover(function() {
var position = $(this).position(),
    left = position.left,
    top = position.top,
    divLeft = position.left - 590,
    divTop = position.top - 50;
//console.log('position.left: ' + position.left + ' position.top: ' + position.top);

$('.flyout').css('top',divTop).css('left',divLeft);
$('.flyout').toggle('slide', {direction:'right'});
});