Question

我正在尝试为表格中的每一行创建一个菜单，该表格以隐藏的div开头，并在鼠标悬停时滑出或显示在表格行的顶部。我从以下开始：

<style>
    table {
        z-index: 1;
        position: absolute;
        float: left;
        border: 1px solid gray;
        border-spacing: 0 !important;
    }
    table tr, table td {
        border-spacing: 0 !important;
        border: 1px solid gray;
    }
    .tableItems {
        cursor: default;
        position: relative;
        z-index: 100;
        float:left;
        display:none;
        height: 24px;
        border:none;
        border:collapse;
    }
    .tableItems ul {
        height: 100%;
        background: gray;
        -webkit-margin-before: 0 !important;
        -webkit-margin-after: 0 !important;
        -webkit-padding-start: 0 !important;
    }
    .tableItems ul li {
        color: white;
        height:100%;
        display:inline;
        vertical-align: middle;
        text-align: center;
        padding: 0 0 0 6px;
    }
</style>

<div class='tableItems'>
  <ul>
    <a href='#'><li>item 1</li></a>
    <a href='#'><li>item 2</li></a>
    <a href='#'><li>item 3</li></a>
  </ul>
</div>

<table>
<tr>
<td class='tableMenu'>
  Menu
  <!--
  <div class='tableMenu'>
    <div class='tableIcon'>
      Menu
    </div>
  </div>
  -->
</td>
<td>
  Something
</td>
<td>
  Something else
</td>
</tr>
</table>

<script>
  $(".tableMenu").mouseenter(
    function() {
      $(".tableItems").show().animate({},175);
    }
  );
  $(".tableItems").mouseout(
    function() {
      $(".tableItems").hide();
    }
  );
</script>

这是一个工作小提琴：

http://jsfiddle.net/vmtSg/

我能够在不影响现有表格行的情况下显示菜单，但是鼠标输出效果不正常，我没有动画滑动动作，我不知道该怎么做。任何帮助表示赞赏。

Answer 1

使用mouseleave代替使用mouseout，因为mouseout会导致事件冒泡并在a标记（或任何其他后代）上悬停时触发事件它位于.tableItems内。 mouseleave不会导致事件传播，因此只有当您离开tableItems而不是包含li s时（使用mouseout时），它才会被触发

$(".tableItems").mouseleave(function() {
      $(this).hide(500);
});

除(".tableItems").show().animate({},175);之外，你可能意味着(".tableItems").show(175);。

来自official doc

此事件类型可能会因事件冒泡而导致许多令人头疼的问题。例如，当鼠标指针在此示例中移出Inner元素时，将向其发送mouseout事件，然后逐渐向外传递。这可以在不合适的时间触发绑定的mouseout处理程序。有关有用的替代方法，请参阅.mouseleave（）的讨论。

<强> Demo

Answer 2

根据我的理解，你想要一个动画，如果你想在JQuery中做到这一点，只需添加慢速或快速作为参数隐藏和显示方法。

$(".tableItems").show("slow");
$(".tableItems").hide("slow");

我这样做的方法是使用CSS hover和transitions。

Answer 3

当鼠标移到时，

滑出或显示在表格行的顶部

考虑到上面这一行，我创造了一个小提琴：

http://jsfiddle.net/vmtSg/3/

var a=0-$('.tableItems').height(); $(".tableMenu").mouseenter( function() { $(".tableItems").show().animate({'top':''+a+'px'}); } ); $(".tableItems").mouseleave( function() { $(this).hide().animate({'top':'0px'}); } );

创建在表格行上滑出的菜单

3 个答案: