When selecting the gear icon for the menu option in a table row, I would like the background to turn yellow. I attempted the following code to highlight the table row:
var view = Core.view.Menu.create({
model: model,
menuContext: { ibmm: ibmm },
anchor: this.$(),
highlight: this.$().parents('tr:first').css('background-color','yellow')
});
view.show();
The highlighting works well when selecting the menu from the table row with the gear icon.
[![enter image description here][1]][1]
The corresponding HTML file snippet is as follows:
<tr id="ember23242" class="ember-view content-row body-row-view container-view" tabindex="0" aria-label="">
However, when moving to the next table row that is not hidden, the previous table row remains highlighted in yellow instead of reverting back to its original color.
[![enter image description here][2]][2]
I am currently using the CSS code below to create the highlight effect when clicking on a row:
table.content-table.highlighted tr.content-row:focus {
background: #FFFF99 none 0 0 repeat;
}
Could someone provide me with a solution for this issue? I am using Ember 1.4.0.