Need to remove the row highlight after select the next row

I need to remove the row highlight when I click on the next table row.

When I'm using the below code the table row is highlighted while clicking the menu in the gear icon. Then when I click for the another table row or gear icon the existing table row highlight is not getting removed. Can anybody please provide me suggestions on how to fix this.

$(function() {
  $("table.content-table.highlighted tr.content-row").on("focusout", function() {
    $(this).css({
      'background': '#FFFF99 none 0 0 repeat'
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="ember18549" class="ember-view content-table focus-group object-table container-view highlighted">
  <tbody>
    <tr id="ember18784" class="ember-view content-row body-row-view container-view" tabindex="0" aria-label="">
      <td id="ember19010" class="ember-view lmdd-menu actions container-view">
        <rs-icon id="ember19015" class="ember-view action-menu icon clickable-icon" title="Acciones y Transiciones" style="width: 1em; height: 1em; font-size: 20px">
          <icon glyph="action" class="action" style="font-size: 20px;">
          </icon>
        </rs-icon>
      </td>
      <td id="ember19021" class="ember-view content-data view view-core_component_data-view-mixin name">
      </td>
    </tr>
    <tr id="ember18784" class="ember-view content-row body-row-view container-view" tabindex="0" aria-label="">
      <td id="ember19010" class="ember-view lmdd-menu actions container-view">
        <rs-icon id="ember19015" class="ember-view action-menu icon clickable-icon" title="Acciones y Transiciones" style="width: 1em; height: 1em; font-size: 20px">
          <icon glyph="action" class="action" style="font-size: 20px;">
          </icon>
        </rs-icon>
      </td>
      <td id="ember19021" class="ember-view content-data view view-core_component_data-view-mixin name">
      </td>
    </tr>
  </tbody>
</table>