fix: [Obs SLOs][KEYBOARD]: Actions menu must be available in Card view on ::focus event (#183652)

Closes: https://github.com/elastic/observability-dev/issues/3390

## Description

The Obs SLOs cards allow users to access a menu of actions on `::hover`
but that menu is not available on `::focus`. This has a workaround by
switching to List or Compact view, but still represents a major keyboard
usability issue and is going to be treated as a level one defect.
Screenshot attached below.

### Steps to recreate

1. Open the [Obs
SLOs](https://issue-serverless-alpbx-pr180406-c06b1b.kb.eu-west-1.aws.qa.elastic.cloud/app/slos)
view
2. Create a new SLO if none exist
3. Hover over the newly created SLO card and verify the `[ ... ]` menu
appears
4. Now press the `Tab` key to navigate through the card by keyboard
5. Verify the `[ ... ]` menu never appears

### What was changed?:
1 The hover functionality was updated in favor of CSS

# Screen


e22c4e45-7eab-403e-974c-8fbf789cc498

x-pack/plugins/observability_solution/slo/public/pages/slos/components/card_view/slo_card_item.tsx

@@ -74,7 +74,6 @@ const getFirstGroupBy = (slo: SLOWithSummaryResponse) => {
 export function SloCardItem({ slo, rules, activeAlerts, historicalSummary, refetchRules }: Props) {
   const containerRef = React.useRef<HTMLDivElement>(null);
 
-  const [isMouseOver, setIsMouseOver] = useState(false);
   const [isActionsPopoverOpen, setIsActionsPopoverOpen] = useState(false);
   const [isAddRuleFlyoutOpen, setIsAddRuleFlyoutOpen] = useState(false);
   const [isEditRuleFlyoutOpen, setIsEditRuleFlyoutOpen] = useState(false);
@@ -110,21 +109,25 @@ export function SloCardItem({ slo, rules, activeAlerts, historicalSummary, refet
       <EuiPanel
         className="sloCardItem"
         panelRef={containerRef as React.Ref<HTMLDivElement>}
-        onMouseOver={() => {
-          if (!isMouseOver) {
-            setIsMouseOver(true);
-          }
-        }}
-        onMouseLeave={() => {
-          if (isMouseOver) {
-            setIsMouseOver(false);
-          }
-        }}
         paddingSize="none"
         css={css`
           height: 182px;
           overflow: hidden;
           position: relative;
+
+          & .sloCardItemActions_hover {
+            pointer-events: none;
+            opacity: 0;
+
+            &:focus-within {
+              pointer-events: auto;
+              opacity: 1;
+            }
+          }
+          &:hover .sloCardItemActions_hover {
+            pointer-events: auto;
+            opacity: 1;
+          }
         `}
         title={
           slo.summary.summaryUpdatedAt
@@ -151,7 +154,7 @@ export function SloCardItem({ slo, rules, activeAlerts, historicalSummary, refet
             />
           }
         />
-        {(isMouseOver || isActionsPopoverOpen) && (
+        <div className={isActionsPopoverOpen ? '' : 'sloCardItemActions_hover'}>
           <SloCardItemActions
             slo={slo}
             rules={rules}
@@ -163,7 +166,7 @@ export function SloCardItem({ slo, rules, activeAlerts, historicalSummary, refet
             setDashboardAttachmentReady={setDashboardAttachmentReady}
             setResetConfirmationModalOpen={setResetConfirmationModalOpen}
           />
-        )}
+        </div>
       </EuiPanel>
 
       <BurnRateRuleFlyout