Issue with Disappearing “Outline” attribute on Table Row

Hello there

I have a strange issue with a disappearing "outline" property on a table row. 

I have a table where the currently selected row ("tr" element) is assigned the class "SigMania_row_highlight_style" to display a purple border around the entire row:

.SigMania_row_highlight_style {

outline: #6300AB 1px solid;

}

<tr class="SigMania_row_highlight_style odd" role="row">

I am using the JQuery Datatables plug in, which adds the "odd" class and the role.

When the user hovers over another row, I dynamically add the class "SigMania-menu-popup-hover" to the other row:

    $("tr").hover(

        function () {

            $(this).addClass(sRowHoverStyle);

        },

        function () {

            $(this).removeClass(sRowHoverStyle);

        }

    );

.SigMania-menu-popup-hover {

   background-color: #F0E9F5 !important;

}

I am taking no action on the currently selected row.

When I do this, the purple outline disappears for reasons unknown.  The Html for the row is not changed – I can verify this from developer tools.  Moreover, I can refresh the display (for example by just unsetting and then setting back on any property of the row from developer tools), and the outline comes back.

I am fairly sure this is an issue with Internet Explorer (I get the same issue with all versions of IE and Edge, but not in FireFox).  I don’t get the same issue when I use the same technique on a user list.

Any help greatly appreciated.