Cannot use mouseover on specific element

Question

I'm trying to display an alert when the use put the mouse over a tr of .scrollable class, this is the 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>

and this is the code:

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

A complete example is available on jsfiddle.

What am I doing wrong?

Answer 1

A tr element works only if it is in a table wrapper - also note that you would need to drop the > in the selector and use this - .scrollable > tbody > tr or .scrollable tr.

See demo below:

$(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>