无法在特定元素上使用鼠标悬停

Question

我试图在用户将鼠标放在 .scrollable class 的 tr 上时显示警报，这是 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 上找到。

我做错了什么？

Answer 1

A 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>

无法在特定元素上使用鼠标悬停

Cannot use mouseover on specific element

javascript

jquery

html

jquery-selectors

css-tables