Revert "fix!: Remove the blocklyMenuItemHighlight CSS class and use the hover…" (#8800)

This reverts commit d6125d4fb9.

core/css.ts

@@ -438,7 +438,8 @@ input[type=number] {
   cursor: inherit;
 }
 
-.blocklyMenuItem:hover {
+/* State: hover. */
+.blocklyMenuItemHighlight {
   background-color: rgba(0,0,0,.1);
 }
 

core/menu.ts

@@ -249,9 +249,11 @@ export class Menu {
   setHighlighted(item: MenuItem | null) {
     const currentHighlighted = this.highlightedItem;
     if (currentHighlighted) {
+      currentHighlighted.setHighlighted(false);
       this.highlightedItem = null;
     }
     if (item) {
+      item.setHighlighted(true);
       this.highlightedItem = item;
       // Bring the highlighted item into view. This has no effect if the menu is
       // not scrollable.

core/menuitem.ts

@@ -12,6 +12,7 @@
 // Former goog.module ID: Blockly.MenuItem
 
 import * as aria from './utils/aria.js';
+import * as dom from './utils/dom.js';
 import * as idGenerator from './utils/idgenerator.js';
 
 /**
@@ -67,6 +68,7 @@ export class MenuItem {
       'blocklyMenuItem ' +
       (this.enabled ? '' : 'blocklyMenuItemDisabled ') +
       (this.checked ? 'blocklyMenuItemSelected ' : '') +
+      (this.highlight ? 'blocklyMenuItemHighlight ' : '') +
       (this.rightToLeft ? 'blocklyMenuItemRtl ' : '');
 
     const content = document.createElement('div');
@@ -175,6 +177,25 @@ export class MenuItem {
     this.checked = checked;
   }
 
+  /**
+   * Highlights or unhighlights the component.
+   *
+   * @param highlight Whether to highlight or unhighlight the component.
+   * @internal
+   */
+  setHighlighted(highlight: boolean) {
+    this.highlight = highlight;
+    const el = this.getElement();
+    if (el && this.isEnabled()) {
+      const name = 'blocklyMenuItemHighlight';
+      if (highlight) {
+        dom.addClass(el, name);
+      } else {
+        dom.removeClass(el, name);
+      }
+    }
+  }
+
   /**
    * Returns true if the menu item is enabled, false otherwise.
    *