Question

我想在桌子上方显示锚点，显示在thead的hover上，然后再次隐藏在mouseout上。我已经使用mouseover和mouseout事件做了这件事，但问题是，当我尝试将鼠标悬停在锚点上时，它会闪烁，因为mouseout事件仍在被触发。我想显示锚点并尝试在显示锚点时单击锚点。

这是我的示例代码：

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

Answer 1

这是一个有趣的问题，因为我过去曾遇到过这样的问题。

在这个FIDDLE中，我有两个元素，上面一个是样式的锚点，下面的一个像你的表格一样是div。

mouseover和mouseout事件使用这两个元素。

我想知道这是否适合你。

JS

$('.table1, .showme').mouseover( function(){
       $('.showme').css('display', 'block');
});
$('.table1, .showme').mouseout( function(){
       $('.showme').css('display', 'none');
});

这是第二个fiddle，其中包含一个大表格，且只有标题处于活动状态。

Answer 2

这是小提琴：http://jsfiddle.net/ctwheels/xp9zjcr1/

您可以移除.hoverableDiv课程的边框，我添加了它以显示选择区域。

我已经完成的工作是将我的链接（<a>）包含在一个包含.hoverableDiv类的div中，该类设置为position:fixed;。在JS中，我计算.th课程中的项目数量，然后获取.th课程项目的位置和大小（我已将class="th"添加到<th> }标签（只有当你想要一个链接时才添加它，你可以让它离开，它不会有链接的悬停效果）。从这里，我把.hoverableDiv类中的每个项目设置为文档中的位置和大小，以匹配与其索引匹配的.th类的项目。然后我设置鼠标悬停的属性和mouseout的属性。

效果是：鼠标悬停时显示文档就绪的链接隐藏，并在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();
});

修改

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

Answer 3

非常感谢所有人。你们所有人都试图帮助我。我真的很感激。我解决了这个问题。我做了这样的事情： -

当悬停离开thead时，当mouseout事件发生并试图隐藏锚点时，锚点闪烁。因此我在锚点上调用mouseover也显示锚点。

$('thead', 'a').mouseover(function () {
                $('a').show();
            });
            $('thead', 'a').mouseout(function () {
                $('a').hide();
            });

显示锚点时停止悬停

3 个答案: