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

Question

当我将鼠标放在tr .scrollable级<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> 上时，我正试图显示警告，这是html：

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

这是代码：

$(function() {
       $("input").keyup(multInputs);

       function multInputs() {
           var mult = 0;
           $("tr").each(function () {
               var $val1 = $('.val1', this).val();
			   var $val2 = $('.odds', this).text();
               var $total = ($val1 * 1) * $val2 - $val1
               $('.multTotal',this).text($total.toPrecision(3));
               mult += $total;
           });
           $("#grandTotal").text(mult);
       }
	   
});
  

jsfiddle上提供了完整的示例。

我做错了什么？

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