Chrome Hover style bug

by InfinitiesLoop

HTML

<p>Click on a cell ('hi') to open a popup menu. Click on a list item in the menu to close the menu. The hover effect on the table row will remain until you hover over it again. Even dev tools will not report the row as being in a :hover state, but the hover style remains!</p>

<table>
  <tr>
    <td>hi</td><td>hi</td>
  </tr>
  <tr>
    <td>hi</td><td>hi</td>
  </tr>
  <tr>
    <td>hi</td><td>hi</td>
  </tr>
  <tr>
    <td>hi</td><td>hi</td>
  </tr>
  <tr>
    <td>hi</td><td>hi</td>
  </tr>
  <tr>
    <td>hi</td><td>hi</td>
  </tr>
  <tr>
    <td>hi</td><td>hi</td>
  </tr>
  <tr>
    <td>hi</td><td>hi</td>
  </tr>
  <tr>
    <td>hi</td><td>hi</td>
  </tr>
  <tr>
    <td>hi</td><td>hi</td>
  </tr>
  <tr>
    <td>hi</td><td>hi</td>
  </tr>
  <tr>
    <td>hi</td><td>hi</td>
  </tr>
</table>

<div id="menu">
  test
  <ul>
  <li>bye</li>
  <li>bye</li>
  <li>bye</li>
  <li>bye</li>
  <li>bye</li>
  <li>bye</li>
  </ul>
</div>

CSS

p {
  font-size: 11px;
  padding: 10px;
}

table {
  width: 100%;
  padding: 10px;
  border: 1px solid black;
}

table td {
  border: 1px solid black;
  cursor: pointer;
}

tr:hover td {
  background-color: lightblue;
}

#menu {
  position: absolute;
  display: none;
  background-color: Gray;
  width: 100px;
}

#menu li:hover {
  background-color: LightGray;
}

JavaScript

$(function() {
  $("td").on("click", function() {
    $("#menu")
    	.clone()
    	.one("click", function() {
          // this is key to reproduce it.
          $(this).closest("td").html("boo");
          return false;
    	})
    	.appendTo(this)
    	.show();
  });
});