不能在特定元素上使用鼠标悬停答案

【问题标题】：Cannot use mouseover on specific element不能在特定元素上使用鼠标悬停
【发布时间】：2017-09-12 19:37:48
【问题描述】：

当用户将鼠标放在tr 的.scrollable 类上时，我正在尝试显示警报，这是html：

<table class="results" id="resource-container" style="height: 769px;">
                <tbody><tr>
                    <td>
                        <div class="scrollable">
                        <tr><td>&nbsp;&nbsp;</td>
                        <td style="padding-left: 10px"><div></tr>
            </tbody></table>

这是代码：

$(document).ready(function() {
  $('.scrollable > tr').mouseover(function()
  {
     alert("hello");
  });
});

jsfiddle 上提供了完整示例。

我做错了什么？

【问题讨论】：

为什么你的 div 包裹着那个 tr？那是无效的标记！
那个div允许滚动表格
但是您的 tr 需要在 table 元素内。它不能像你发布的那样。检查您的标记的有效性 - 显然这不是有效的标记。
有一个表，我只是看到我错过了在我的示例中添加这个
我希望它不在外部 div 之外，因为这也是无效标记 - 举个例子 - 你不能让 div 漂浮在 tr 之外。它们必须在 tr 内才能成为有效标记。

标签： javascript jquery html jquery-selectors css-tables

【解决方案1】：

tr 元素只有在 table 包装器中才有效 - 另请注意，您需要在选择器中删除 > 并使用它 - .scrollable > tbody > tr 或 .scrollable tr。

请看下面的演示：

$(document).ready(function() {
  $('.scrollable tr').mouseover(function() {
    console.log("hello");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="scrollable">
  <tr>
    <td style="padding-left: 10px">
      <div>
        <strong>foo</strong>
        <br>test
      </div>
    </td>
  </tr>
</table>

【讨论】：

我缺少添加表结构，请检查更新吗？
这不起作用，因为可滚动类在 div 上，而不是在您的示例中的桌子上
哦，刚刚注意到，td 内的 tr 也是无效语法 - 您可以在 td 内使用 div...
tr在td的div里面，没有办法实现吗？
不，您必须使用嵌套表 - 在 td 内使用 table，然后在 table 内使用您可以保留 tr...