diff --git a/src/components/Hoverable/index.js b/src/components/Hoverable/index.js
index b3ab1850d874..a73b85795fb0 100644
--- a/src/components/Hoverable/index.js
+++ b/src/components/Hoverable/index.js
@@ -10,6 +10,9 @@ import {propTypes, defaultProps} from './hoverablePropTypes';
 class Hoverable extends Component {
     constructor(props) {
         super(props);
+
+        this.handleVisibilityChange = this.handleVisibilityChange.bind(this);
+
         this.state = {
             isHovered: false,
         };
@@ -30,6 +33,8 @@ class Hoverable extends Component {
 
         // Remember Touchend fires before `mouse` events so we have to use alternative.
         document.addEventListener('touchmove', this.enableHover);
+
+        document.addEventListener('visibilitychange', this.handleVisibilityChange);
     }
 
     componentDidUpdate(prevProps) {
@@ -45,6 +50,7 @@ class Hoverable extends Component {
     componentWillUnmount() {
         document.removeEventListener('touchstart', this.disableHover);
         document.removeEventListener('touchmove', this.enableHover);
+        document.removeEventListener('visibilitychange', this.handleVisibilityChange);
     }
 
     /**
@@ -67,6 +73,14 @@ class Hoverable extends Component {
         }
     }
 
+    handleVisibilityChange() {
+        if (document.visibilityState !== 'hidden') {
+            return;
+        }
+
+        this.setIsHovered(false);
+    }
+
     render() {
         let child = this.props.children;
         if (_.isArray(this.props.children) && this.props.children.length === 1) {
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 200fb885a2de..0ccd27757cd6 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -23,6 +23,7 @@ import * as DeviceCapabilities from '../libs/DeviceCapabilities';
 import ControlSelection from '../libs/ControlSelection';
 import variables from '../styles/variables';
 import * as Session from '../libs/actions/Session';
+import Hoverable from './Hoverable';
 
 const propTypes = {
     ...menuItemPropTypes,
@@ -104,189 +105,202 @@ function MenuItem(props) {
     const fallbackAvatarSize = props.viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT;
 
     return (
-        <PressableWithSecondaryInteraction
-            onPress={Session.checkIfActionIsAllowed((e) => {
-                if (props.disabled || !props.interactive) {
-                    return;
-                }
+        <Hoverable>
+            {(isHovered) => (
+                <PressableWithSecondaryInteraction
+                    onPress={Session.checkIfActionIsAllowed((e) => {
+                        if (props.disabled || !props.interactive) {
+                            return;
+                        }
 
-                if (e && e.type === 'click') {
-                    e.currentTarget.blur();
-                }
+                        if (e && e.type === 'click') {
+                            e.currentTarget.blur();
+                        }
 
-                props.onPress(e);
-            }, props.isAnonymousAction)}
-            onPressIn={() => props.shouldBlockSelection && props.isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
-            onPressOut={ControlSelection.unblock}
-            onSecondaryInteraction={props.onSecondaryInteraction}
-            style={({hovered, pressed}) => [
-                props.style,
-                !props.interactive && styles.cursorDefault,
-                StyleUtils.getButtonBackgroundColorStyle(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive), true),
-                (hovered || pressed) && props.hoverAndPressStyle,
-                ...(_.isArray(props.wrapperStyle) ? props.wrapperStyle : [props.wrapperStyle]),
-                props.shouldGreyOutWhenDisabled && props.disabled && styles.buttonOpacityDisabled,
-            ]}
-            disabled={props.disabled}
-            ref={props.forwardedRef}
-            accessibilityRole={CONST.ACCESSIBILITY_ROLE.MENUITEM}
-            accessibilityLabel={props.title}
-        >
-            {({hovered, pressed}) => (
-                <>
-                    <View style={[styles.flexColumn, styles.flex1]}>
-                        {Boolean(props.label) && (
-                            <View style={props.icon ? styles.mb2 : null}>
-                                <Text style={StyleUtils.combineStyles(styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting, styles.pre)}>{props.label}</Text>
-                            </View>
-                        )}
-                        <View style={[styles.flexRow, styles.pointerEventsAuto, props.disabled && styles.cursorDisabled]}>
-                            {Boolean(props.icon) && _.isArray(props.icon) && (
-                                <MultipleAvatars
-                                    isHovered={hovered}
-                                    isPressed={pressed}
-                                    icons={props.icon}
-                                    size={CONST.AVATAR_SIZE.DEFAULT}
-                                    secondAvatarStyle={[
-                                        StyleUtils.getBackgroundAndBorderStyle(themeColors.sidebar),
-                                        pressed ? StyleUtils.getBackgroundAndBorderStyle(themeColors.buttonPressedBG) : undefined,
-                                        hovered && !pressed ? StyleUtils.getBackgroundAndBorderStyle(themeColors.border) : undefined,
-                                    ]}
-                                />
-                            )}
-                            {Boolean(props.icon) && !_.isArray(props.icon) && (
-                                <View style={[styles.popoverMenuIcon, ...props.iconStyles, StyleUtils.getAvatarWidthStyle(props.avatarSize || CONST.AVATAR_SIZE.DEFAULT)]}>
-                                    {props.iconType === CONST.ICON_TYPE_ICON && (
-                                        <Icon
-                                            src={props.icon}
-                                            width={props.iconWidth}
-                                            height={props.iconHeight}
-                                            fill={
-                                                props.iconFill ||
-                                                StyleUtils.getIconFillColor(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive), true)
-                                            }
-                                        />
-                                    )}
-                                    {props.iconType === CONST.ICON_TYPE_WORKSPACE && (
-                                        <Avatar
-                                            imageStyles={[styles.alignSelfCenter]}
+                        props.onPress(e);
+                    }, props.isAnonymousAction)}
+                    onPressIn={() => props.shouldBlockSelection && props.isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
+                    onPressOut={ControlSelection.unblock}
+                    onSecondaryInteraction={props.onSecondaryInteraction}
+                    style={({pressed}) => [
+                        props.style,
+                        !props.interactive && styles.cursorDefault,
+                        StyleUtils.getButtonBackgroundColorStyle(getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive), true),
+                        (isHovered || pressed) && props.hoverAndPressStyle,
+                        ...(_.isArray(props.wrapperStyle) ? props.wrapperStyle : [props.wrapperStyle]),
+                        props.shouldGreyOutWhenDisabled && props.disabled && styles.buttonOpacityDisabled,
+                    ]}
+                    disabled={props.disabled}
+                    ref={props.forwardedRef}
+                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.MENUITEM}
+                    accessibilityLabel={props.title}
+                >
+                    {({pressed}) => (
+                        <>
+                            <View style={[styles.flexColumn, styles.flex1]}>
+                                {Boolean(props.label) && (
+                                    <View style={props.icon ? styles.mb2 : null}>
+                                        <Text style={StyleUtils.combineStyles(styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting, styles.pre)}>
+                                            {props.label}
+                                        </Text>
+                                    </View>
+                                )}
+                                <View style={[styles.flexRow, styles.pointerEventsAuto, props.disabled && styles.cursorDisabled]}>
+                                    {Boolean(props.icon) && _.isArray(props.icon) && (
+                                        <MultipleAvatars
+                                            isHovered={isHovered}
+                                            isPressed={pressed}
+                                            icons={props.icon}
                                             size={CONST.AVATAR_SIZE.DEFAULT}
-                                            source={props.icon}
-                                            fallbackIcon={props.fallbackIcon}
-                                            name={props.title}
-                                            type={CONST.ICON_TYPE_WORKSPACE}
+                                            secondAvatarStyle={[
+                                                StyleUtils.getBackgroundAndBorderStyle(themeColors.sidebar),
+                                                pressed ? StyleUtils.getBackgroundAndBorderStyle(themeColors.buttonPressedBG) : undefined,
+                                                isHovered && !pressed ? StyleUtils.getBackgroundAndBorderStyle(themeColors.border) : undefined,
+                                            ]}
                                         />
                                     )}
-                                    {props.iconType === CONST.ICON_TYPE_AVATAR && (
-                                        <Avatar
-                                            imageStyles={[styles.alignSelfCenter]}
-                                            source={props.icon}
-                                            fallbackIcon={props.fallbackIcon}
-                                            size={props.avatarSize || CONST.AVATAR_SIZE.DEFAULT}
-                                        />
-                                    )}
-                                </View>
-                            )}
-                            <View style={[styles.justifyContentCenter, styles.flex1, StyleUtils.getMenuItemTextContainerStyle(props.isSmallAvatarSubscriptMenu)]}>
-                                {Boolean(props.description) && props.shouldShowDescriptionOnTop && (
-                                    <Text
-                                        style={descriptionTextStyle}
-                                        numberOfLines={2}
-                                    >
-                                        {props.description}
-                                    </Text>
-                                )}
-                                <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                    {Boolean(props.title) && (
-                                        <Text
-                                            style={titleTextStyle}
-                                            numberOfLines={props.numberOfLinesTitle}
-                                        >
-                                            {convertToLTR(props.title)}
-                                        </Text>
-                                    )}
-                                    {Boolean(props.shouldShowTitleIcon) && (
-                                        <View style={[styles.ml2]}>
-                                            <Icon
-                                                src={props.titleIcon}
-                                                fill={themeColors.iconSuccessFill}
-                                            />
+                                    {Boolean(props.icon) && !_.isArray(props.icon) && (
+                                        <View style={[styles.popoverMenuIcon, ...props.iconStyles, StyleUtils.getAvatarWidthStyle(props.avatarSize || CONST.AVATAR_SIZE.DEFAULT)]}>
+                                            {props.iconType === CONST.ICON_TYPE_ICON && (
+                                                <Icon
+                                                    src={props.icon}
+                                                    width={props.iconWidth}
+                                                    height={props.iconHeight}
+                                                    fill={
+                                                        props.iconFill ||
+                                                        StyleUtils.getIconFillColor(
+                                                            getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive),
+                                                            true,
+                                                        )
+                                                    }
+                                                />
+                                            )}
+                                            {props.iconType === CONST.ICON_TYPE_WORKSPACE && (
+                                                <Avatar
+                                                    imageStyles={[styles.alignSelfCenter]}
+                                                    size={CONST.AVATAR_SIZE.DEFAULT}
+                                                    source={props.icon}
+                                                    fallbackIcon={props.fallbackIcon}
+                                                    name={props.title}
+                                                    type={CONST.ICON_TYPE_WORKSPACE}
+                                                />
+                                            )}
+                                            {props.iconType === CONST.ICON_TYPE_AVATAR && (
+                                                <Avatar
+                                                    imageStyles={[styles.alignSelfCenter]}
+                                                    source={props.icon}
+                                                    fallbackIcon={props.fallbackIcon}
+                                                    size={props.avatarSize || CONST.AVATAR_SIZE.DEFAULT}
+                                                />
+                                            )}
                                         </View>
                                     )}
+                                    <View style={[styles.justifyContentCenter, styles.flex1, StyleUtils.getMenuItemTextContainerStyle(props.isSmallAvatarSubscriptMenu)]}>
+                                        {Boolean(props.description) && props.shouldShowDescriptionOnTop && (
+                                            <Text
+                                                style={descriptionTextStyle}
+                                                numberOfLines={2}
+                                            >
+                                                {props.description}
+                                            </Text>
+                                        )}
+                                        <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                                            {Boolean(props.title) && (
+                                                <Text
+                                                    style={titleTextStyle}
+                                                    numberOfLines={props.numberOfLinesTitle}
+                                                >
+                                                    {convertToLTR(props.title)}
+                                                </Text>
+                                            )}
+                                            {Boolean(props.shouldShowTitleIcon) && (
+                                                <View style={[styles.ml2]}>
+                                                    <Icon
+                                                        src={props.titleIcon}
+                                                        fill={themeColors.iconSuccessFill}
+                                                    />
+                                                </View>
+                                            )}
+                                        </View>
+                                        {Boolean(props.description) && !props.shouldShowDescriptionOnTop && (
+                                            <Text
+                                                style={descriptionTextStyle}
+                                                numberOfLines={2}
+                                            >
+                                                {props.description}
+                                            </Text>
+                                        )}
+                                        {Boolean(props.furtherDetails) && (
+                                            <View style={[styles.flexRow, styles.mt1, styles.alignItemsCenter]}>
+                                                <Icon
+                                                    src={props.furtherDetailsIcon}
+                                                    height={variables.iconSizeNormal}
+                                                    width={variables.iconSizeNormal}
+                                                    inline
+                                                />
+                                                <Text
+                                                    style={[styles.furtherDetailsText, styles.ph2, styles.pt1]}
+                                                    numberOfLines={2}
+                                                >
+                                                    {props.furtherDetails}
+                                                </Text>
+                                            </View>
+                                        )}
+                                    </View>
                                 </View>
-                                {Boolean(props.description) && !props.shouldShowDescriptionOnTop && (
-                                    <Text
-                                        style={descriptionTextStyle}
-                                        numberOfLines={2}
-                                    >
-                                        {props.description}
-                                    </Text>
+                            </View>
+                            <View style={[styles.flexRow, styles.menuItemTextContainer, styles.pointerEventsNone]}>
+                                {Boolean(props.badgeText) && (
+                                    <Badge
+                                        text={props.badgeText}
+                                        badgeStyles={[
+                                            styles.alignSelfCenter,
+                                            props.brickRoadIndicator ? styles.mr2 : undefined,
+                                            props.focused || isHovered || pressed ? styles.hoveredButton : {},
+                                        ]}
+                                    />
+                                )}
+                                {/* Since subtitle can be of type number, we should allow 0 to be shown */}
+                                {(props.subtitle || props.subtitle === 0) && (
+                                    <View style={[styles.justifyContentCenter, styles.mr1]}>
+                                        <Text style={[styles.textLabelSupporting, props.style]}>{props.subtitle}</Text>
+                                    </View>
+                                )}
+                                {!_.isEmpty(props.floatRightAvatars) && (
+                                    <View style={[styles.justifyContentCenter, props.brickRoadIndicator ? styles.mr2 : undefined]}>
+                                        <MultipleAvatars
+                                            isHovered={isHovered}
+                                            isPressed={pressed}
+                                            icons={props.floatRightAvatars}
+                                            size={props.floatRightAvatarSize || fallbackAvatarSize}
+                                            fallbackIcon={defaultWorkspaceAvatars.WorkspaceBuilding}
+                                            shouldStackHorizontally={props.shouldStackHorizontally}
+                                        />
+                                    </View>
                                 )}
-                                {Boolean(props.furtherDetails) && (
-                                    <View style={[styles.flexRow, styles.mt1, styles.alignItemsCenter]}>
+                                {Boolean(props.brickRoadIndicator) && (
+                                    <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.ml1]}>
                                         <Icon
-                                            src={props.furtherDetailsIcon}
-                                            height={variables.iconSizeNormal}
-                                            width={variables.iconSizeNormal}
-                                            inline
+                                            src={Expensicons.DotIndicator}
+                                            fill={props.brickRoadIndicator === 'error' ? colors.red : colors.green}
                                         />
-                                        <Text
-                                            style={[styles.furtherDetailsText, styles.ph2, styles.pt1]}
-                                            numberOfLines={2}
-                                        >
-                                            {props.furtherDetails}
-                                        </Text>
                                     </View>
                                 )}
+                                {Boolean(props.shouldShowRightIcon) && (
+                                    <View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, props.disabled && styles.cursorDisabled]}>
+                                        <Icon
+                                            src={props.iconRight}
+                                            fill={StyleUtils.getIconFillColor(getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive))}
+                                        />
+                                    </View>
+                                )}
+                                {props.shouldShowSelectedState && <SelectCircle isChecked={props.isSelected} />}
                             </View>
-                        </View>
-                    </View>
-                    <View style={[styles.flexRow, styles.menuItemTextContainer, styles.pointerEventsNone]}>
-                        {Boolean(props.badgeText) && (
-                            <Badge
-                                text={props.badgeText}
-                                badgeStyles={[styles.alignSelfCenter, props.brickRoadIndicator ? styles.mr2 : undefined, props.focused || hovered || pressed ? styles.hoveredButton : {}]}
-                            />
-                        )}
-                        {/* Since subtitle can be of type number, we should allow 0 to be shown */}
-                        {(props.subtitle || props.subtitle === 0) && (
-                            <View style={[styles.justifyContentCenter, styles.mr1]}>
-                                <Text style={[styles.textLabelSupporting, props.style]}>{props.subtitle}</Text>
-                            </View>
-                        )}
-                        {!_.isEmpty(props.floatRightAvatars) && (
-                            <View style={[styles.justifyContentCenter, props.brickRoadIndicator ? styles.mr2 : undefined]}>
-                                <MultipleAvatars
-                                    isHovered={hovered}
-                                    isPressed={pressed}
-                                    icons={props.floatRightAvatars}
-                                    size={props.floatRightAvatarSize || fallbackAvatarSize}
-                                    fallbackIcon={defaultWorkspaceAvatars.WorkspaceBuilding}
-                                    shouldStackHorizontally={props.shouldStackHorizontally}
-                                />
-                            </View>
-                        )}
-                        {Boolean(props.brickRoadIndicator) && (
-                            <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.ml1]}>
-                                <Icon
-                                    src={Expensicons.DotIndicator}
-                                    fill={props.brickRoadIndicator === 'error' ? colors.red : colors.green}
-                                />
-                            </View>
-                        )}
-                        {Boolean(props.shouldShowRightIcon) && (
-                            <View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, props.disabled && styles.cursorDisabled]}>
-                                <Icon
-                                    src={props.iconRight}
-                                    fill={StyleUtils.getIconFillColor(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive))}
-                                />
-                            </View>
-                        )}
-                        {props.shouldShowSelectedState && <SelectCircle isChecked={props.isSelected} />}
-                    </View>
-                </>
+                        </>
+                    )}
+                </PressableWithSecondaryInteraction>
             )}
-        </PressableWithSecondaryInteraction>
+        </Hoverable>
     );
 }