jquery - 显示 anchor 时停止悬停

Question

我想在表格正上方显示 anchor ，在 hover 上显示，然后再次在 mouseout 上隐藏。我已经用 mouseover 和 mouseout 事件做了这个，但问题是当我试图将鼠标移到 anchor 上时它会闪烁，因为 mouseout 事件仍在触发。我想显示 anchor 并尝试在显示时单击 anchor 。

这是我的示例代码:

<a href="#" class="anchor" style="display:none">test</a>
<table>
    <thead>
         <tr>
            <th></th>
         </tr>
  </thead>
  <!-- other code --> 
</table>

Answer 1

这是 fiddle :http://jsfiddle.net/ctwheels/xp9zjcr1/

你可以去掉.hoverableDiv类的边框，我添加它是为了给你显示选择区域。

我所做的是将您的链接 ( <a> ) 包装在一个 div 类中 .hoverableDiv ，它被设置为 position:fixed; 。在 JS 中，我计算 .th 类中的元素数，并获得 .th 类元素的位置和大小(我已将 class="th" 添加到您的 <th> 标签中(仅当您需要链接时才添加它，您可以离开class out，它不会有链接的悬停效果。从这里，我获取 .hoverableDiv 类中的每个元素，并在文档中设置它的位置和大小，以匹配具有与其索引匹配的 .th 类的元素。然后我设置 mouseover 的属性和 mouseout 的属性。

效果是:文档就绪时隐藏的链接在鼠标悬停时显示并在鼠标移开时再次隐藏。在这些事件中，链接周围的 div 会扩展和收缩到正确的位置

HTML

<div class="expandForHover"></div>
<table cellspacing="5px">
    <thead>
        <tr>
            <th class="th">First</th>
            <th class="th">Second</th>
            <th class="th">Third</th>
        </tr>
    </thead>
    <tr>
        <td>this</td>
        <td>this2</td>
        <td>this2</td>
    </tr>
</table>
<div class="hoverableDiv"><a href="#" class="anchor">test</a>

</div>
<div class="hoverableDiv"><a href="#" class="anchor">test2</a>

</div>
<div class="hoverableDiv"><a href="#" class="anchor">test3</a>

</div>

CSS

table {
    background-color:#123456;
    margin-left:20px;
    margin-top:30px;
}
thead {
    background-color:#aaaaaa;
}
.hoverableDiv {
    position:fixed;
    background-color:none;
    text-align:center;
    border:1px solid black;
}
.anchor {
    background-color:#999999;
}

JS

var hovDivHeight = $(".hoverableDiv").height();
var tableSpacing = parseInt($("table").attr("cellspacing"), 10);

var numItems = $(".hoverableDiv").length;
$(".anchor").hide();

for (i = 0; i < numItems; i++) {
    var thLeft = $(".th:eq(" + i + ")").offset().left;
    var thTop = $(".th:eq(" + i + ")").offset().top;
    var thW = $(".th:eq(" + i + ")").width();
    var thH = $(".th:eq(" + i + ")").height();

    $(".hoverableDiv:eq(" + i + ")").css({
        left: thLeft + "px",
        width: thW + "px",
        top: thTop + "px",
        height: hovDivHeight + "px"
    });
}
$(".hoverableDiv").mouseover(function () {
    var aHeight = $(".anchor").height();
    var index = $(this).index()-2;
    $(this).css({
        height: hovDivHeight + tableSpacing+ thH + "px",
        top: thTop -thH -tableSpacing + "px"
    });
    $(".anchor:eq(" + index + ")").show();
});

$(".hoverableDiv").mouseout(function () {
    $(this).css({
        height: hovDivHeight + "px",
        top: thTop + "px"
    });
    $(".anchor").hide();
});

编辑

---

我添加了这个 fiddle :http://jsfiddle.net/ctwheels/xp9zjcr1/2/，它具有基本的样式，并删除了边框，正如我在上面提到的那样。

---