Question

我想用jquery实现一个Show / hide onMouseOver（）函数，该函数使我在第一个列表的后面几秒钟而不更改表中<tr>的数量（我的意思是动态{{ 1}} 它必须与现有的重叠）。关于这个问题，我已经找到了。我试图用css实现相同的解决方案...但是我遇到了“闪烁表”问题。解决该问题的最佳解决方案是什么？

html代码

<tr>

jQuery

<table>
    <tr>
        <td>...</td>
        <td class="hover-cell" data-target="#hidden_123">Hover this...</td>
        <td class="hidden" id="hidden_123">Hidden...</td>
    </tr>
    <tr>
        <td>...</td>
        <td class="hover-cell" data-target="#hidden_456">Hover this...</td>
        <td class="hidden" id="hidden_456">Hidden...</td>
    </tr>
    <tr>
        <td>...</td>
        <td class="hover-cell" data-target="#hidden_789">Hover this...</td>
        <td class="hidden" id="hidden_789">Hidden...</td>
    </tr>
</table>

css代码

$('table').on('mouseover', '.hover-cell', function() {
    var target = $(this).data('target');
    $(target).show();
}).on('mouseout', '.hover-cell', function() {
    var target = $(this).data('target');
    $(target).hide();
});

jsfiddle-> documentation

图片。

http://jsfiddle.net/jan7ajpy/

Answer 1

使用.hover-cell:hover + .hidden

learn about +

要在下面进行设置，请使用：.hover-cell:hover{display:block;}

.hidden { display: none; }
.hover-cell:hover,.hover-cell:hover + .hidden{
    display:block;
}

<table>
    <tr>
    	<td>...</td>
        <td class="hover-cell" data-target="#hidden_123">Hover this...</td>
        <td class="hidden" id="hidden_123">Hidden...</td>
    </tr>
    <tr>
    	<td>...</td>
        <td class="hover-cell" data-target="#hidden_456">Hover this...</td>
        <td class="hidden" id="hidden_456">Hidden...</td>
    </tr>
    <tr>
    	<td>...</td>
        <td class="hover-cell" data-target="#hidden_789">Hover this...</td>
        <td class="hidden" id="hidden_789">Hidden...</td>
    </tr>
</table>

Answer 2

如果我阅读了您的问题，并且正确理解了您要寻找的内容，那么这可能会有所帮助。我使用jQuery隐藏行并在悬停时在其位置显示另一个元素。请将光标悬停在第一个给定的元素上以查看示例：

$(document).ready(function() {
  $(".example").hide();
  $("tr:first-of-type td:first-of-type").hover(function() {
    $(".example").show();
    $("tr:nth-of-type(3) td").hide();
    $("tr:nth-of-type(4) td").css('padding-top', '20px');
  }, function() {
    $(".example").hide();
    $("tr:nth-of-type(3) td").show();
    $("tr:nth-of-type(4) td").css('padding-top', '0');
  });
});

.example {
  position: absolute;
  top: 30px;
  left: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>foo</td>
  </tr>
  <tr class="example">
    <td>bar</td>
  </tr>
  <tr>
    <td>something</td>
    <tr>
      <td>some other data</td>
    </tr>
    <tr>
      <td>
        foobar
      </td>
    </tr>
</table>

如果这是您要查找的内容，但不完全是您的意思，请告诉我。

JSFiddle

在上一个内部表格下方显示/隐藏重叠内容

2 个答案: