Ways to maintain hover functionality when the submenu is visible

Question

Ways to maintain hover functionality when the submenu is visible

My website features a simple table that displays devices and their characteristics. A condensed version of the table can be found in the link below.

import "./styles.css";
import { SubMenu } from "./SubMenu";

const subMenuSlice = <SubMenu />;

const nodes = [
  {
    id: "0",
    name: "Samsung Galaxy",
    subMenu: subMenuSlice
  },
  {
    id: "0",
    name: "Iphone",
    subMenu: subMenuSlice
  }
];

export default function App() {
  return (
    <table>
      <tbody>
        {nodes.map((val, key) => (
          <tr key={key}>
            <td>{val.name}</td>
            <td>{val.subMenu}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

SubMenu.tsx

import { useState } from "react";
import AppsIcon from "@mui/icons-material/Apps";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import "./styles.css";

export const SubMenu = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <DropdownMenu.Root open={isOpen} onOpenChange={setIsOpen}>
      <DropdownMenu.Trigger>
        <AppsIcon className="sss" />
      </DropdownMenu.Trigger>
      <DropdownMenu.Portal>
        <DropdownMenu.Content
          side="bottom"
          sideOffset={-30}
          align="start"
          alignOffset={80}
        >
          <button className="style-button">Edit </button>
          <button className="style-button">Make </button>
          <button className="style-button">Delete </button>
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  );
};

styles.css

    .sss {
  visibility: hidden;
}

tr:hover .sss {
  background: gray;
  visibility: visible;
}

tr:hover {
  background: gray;
  visibility: visible;
  pointer-events: initial !important;
}

.style-button:hover {
  background-color: aqua;
}

https://codesandbox.io/s/romantic-rgb-5t7xkq

When hovering over a row in the table, it turns gray and reveals an additional button. Clicking on this button opens a submenu for the user.

The issue at hand is that when the cursor moves to the submenu, the hover effect (gray) disappears from the table row. Any suggestions on how to maintain the hover effect while the submenu is active (open)?

javascript css reactjs hover submenu

Answer 1

Answer №1

To keep track of the state, you can assign an id to the item that is currently being "hovered". Then add a specific class and style it based on that class, as shown in the example below:

MainApp.tsx

import "./styles.css";
import { SubMenu } from "./SubMenu";
import { useState } from "react";

const subMenuSlice = <SubMenu />;

const itemsList = [
  {
    id: "0",
    name: "Samsung Galaxy",
    subMenu: subMenuSlice
  },
  {
    id: "1",
    name: "Iphone",
    subMenu: subMenuSlice
  }
];

export default function MainApp() {
  const [isHovered, setIsHovered] = useState(null);

  const handleMouseEnter = (id) => {
    setIsHovered(id);
  };

  const handleMouseLeave = () => {
    setIsHovered(null);
  };

  return (
    <table>
      <tbody>
        {itemsList.map((item, key) => (
          <tr
            key={key}
            onMouseEnter={() => handleMouseEnter(item.id)}
            onMouseLeave={handleMouseLeave}
            className={item.id === isHovered ? "hovered" : ""} // Add class if id matches
          >
            <td>{item.name}</td>
            <td>{item.subMenu}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

styles.css

.sss {
  visibility: hidden;
}

tr.hovered .sss {
  background: gray;
  visibility: visible;
}

tr.hovered {
  background: gray;
  visibility: visible;
  pointer-events: initial !important;
}

.style-button:hover {
  background-color: aqua;
}

Ensure that all ids are unique in this setup. If duplicates exist, opt for another unique identifier.

Update

If you wish to maintain this state not just during hover but also when active, make these adjustments:

Rename the state to "isActive" and pass this value from the child component to the parent so it can be used in the className. Additionally, reinstate the original styles for the hovered state to see them both during hover and when active. Here's how you can modify your code:

MainApp.tsx

import "./styles.css";
import { SubMenu } from "./SubMenu";
import { useState } from "react";

const subMenuSlice = <SubMenu />;

const itemsList = [
  {
    id: "0",
    name: "Samsung Galaxy",
    subMenu: subMenuSlice
  },  
  {
    id: "1",
    name: "Iphone",
    subMenu: subMenuSlice
  }
];

export default function MainApp() {
  const [isActive, setIsActive] = useState<string | null>(null);

  return (
    <table>
      <tbody>
        {itemsList.map((item, key) => (
          <tr key={key} className={isActive === item.id ? "active" : ""}>
            <td>{item.name}</td>
            <td>
              {/* Check if the callback returns true, then set isActive to the id */}
              <SubMenu
                openCallback={(boolValue) =>
                  boolValue ? setIsActive(item.id) : setIsActive(null)
                }
              />
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

styles.css

.sss {
  visibility: hidden;
}

tr.active .sss, tr:hover .sss {
  background: gray;
  visibility: visible;
}

tr.active, tr:hover {
  background: gray;
  visibility: visible;
  pointer-events: initial !important;
}

.style-button:hover {
  background-color: aqua;
}

SubMenu.tsx

import { useState } from "react";
import AppsIcon from "@mui/icons-material/Apps";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import "./styles.css";

export const SubMenu = ({ openCallback }: { openCallback?: (arg: boolean) => void }) => {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen((prevState) => !prevState);
    if (openCallback) {
      openCallback(!isOpen); // Call the function with the opposite boolean value of isOpen
    }
  };

  return (
    <DropdownMenu.Root open={isOpen} onOpenChange={handleOpen}>
      <DropdownMenu.Trigger>
        <AppsIcon className="sss" />
      </DropdownMenu.Trigger>
      <DropdownMenu.Portal>
        <DropdownMenu.Content
          side="bottom"
          sideOffset={-30}
          align="start"
          alignOffset={80}
        >
          <button className="style-button">Edit </button>
          <button className="style-button">Make </button>
          <button className="style-button">Delete </button>
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  );
};

Answer 2

To keep track of the state, you can assign an id to the item that is currently being "hovered". Then add a specific class and style it based on that class, as shown in the example below:

MainApp.tsx

import "./styles.css";
import { SubMenu } from "./SubMenu";
import { useState } from "react";

const subMenuSlice = <SubMenu />;

const itemsList = [
  {
    id: "0",
    name: "Samsung Galaxy",
    subMenu: subMenuSlice
  },
  {
    id: "1",
    name: "Iphone",
    subMenu: subMenuSlice
  }
];

export default function MainApp() {
  const [isHovered, setIsHovered] = useState(null);

  const handleMouseEnter = (id) => {
    setIsHovered(id);
  };

  const handleMouseLeave = () => {
    setIsHovered(null);
  };

  return (
    <table>
      <tbody>
        {itemsList.map((item, key) => (
          <tr
            key={key}
            onMouseEnter={() => handleMouseEnter(item.id)}
            onMouseLeave={handleMouseLeave}
            className={item.id === isHovered ? "hovered" : ""} // Add class if id matches
          >
            <td>{item.name}</td>
            <td>{item.subMenu}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

styles.css

.sss {
  visibility: hidden;
}

tr.hovered .sss {
  background: gray;
  visibility: visible;
}

tr.hovered {
  background: gray;
  visibility: visible;
  pointer-events: initial !important;
}

.style-button:hover {
  background-color: aqua;
}

Ensure that all ids are unique in this setup. If duplicates exist, opt for another unique identifier.

Update

If you wish to maintain this state not just during hover but also when active, make these adjustments:

Rename the state to "isActive" and pass this value from the child component to the parent so it can be used in the className. Additionally, reinstate the original styles for the hovered state to see them both during hover and when active. Here's how you can modify your code:

MainApp.tsx

import "./styles.css";
import { SubMenu } from "./SubMenu";
import { useState } from "react";

const subMenuSlice = <SubMenu />;

const itemsList = [
  {
    id: "0",
    name: "Samsung Galaxy",
    subMenu: subMenuSlice
  },  
  {
    id: "1",
    name: "Iphone",
    subMenu: subMenuSlice
  }
];

export default function MainApp() {
  const [isActive, setIsActive] = useState<string | null>(null);

  return (
    <table>
      <tbody>
        {itemsList.map((item, key) => (
          <tr key={key} className={isActive === item.id ? "active" : ""}>
            <td>{item.name}</td>
            <td>
              {/* Check if the callback returns true, then set isActive to the id */}
              <SubMenu
                openCallback={(boolValue) =>
                  boolValue ? setIsActive(item.id) : setIsActive(null)
                }
              />
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

styles.css

.sss {
  visibility: hidden;
}

tr.active .sss, tr:hover .sss {
  background: gray;
  visibility: visible;
}

tr.active, tr:hover {
  background: gray;
  visibility: visible;
  pointer-events: initial !important;
}

.style-button:hover {
  background-color: aqua;
}

SubMenu.tsx

import { useState } from "react";
import AppsIcon from "@mui/icons-material/Apps";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import "./styles.css";

export const SubMenu = ({ openCallback }: { openCallback?: (arg: boolean) => void }) => {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen((prevState) => !prevState);
    if (openCallback) {
      openCallback(!isOpen); // Call the function with the opposite boolean value of isOpen
    }
  };

  return (
    <DropdownMenu.Root open={isOpen} onOpenChange={handleOpen}>
      <DropdownMenu.Trigger>
        <AppsIcon className="sss" />
      </DropdownMenu.Trigger>
      <DropdownMenu.Portal>
        <DropdownMenu.Content
          side="bottom"
          sideOffset={-30}
          align="start"
          alignOffset={80}
        >
          <button className="style-button">Edit </button>
          <button className="style-button">Make </button>
          <button className="style-button">Delete </button>
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  );
};

Answer 3

Answer №2

If you are not concerned about supporting outdated browsers, you can incorporate the :has() CSS relational pseudo-class to style the tr element when it contains a button with data-state="open". It is important to note that this feature is currently unsupported in Firefox. However, as of now, it enjoys widespread adoption at approximately 87.53%.

If this approach aligns with your needs, the steps are as follows:

Apply a grey background to the .sss class nested within open buttons:
```
tr td button[data-state="open"] .sss {...}
```
Assign a grey background to the tr element that includes an open button:
```
tr:has(button[data-state="open"]) {...}
```

Your complete style.css should resemble the following:

.sss {
  visibility: hidden;
}

tr:hover .sss,
tr td button[data-state="open"] .sss {
  background: gray;
  visibility: visible;
}

tr:hover,
tr:has(button[data-state="open"]) {
  background: gray;
  visibility: visible;
  pointer-events: initial !important;
}

.style-button:hover {
  background-color: aqua;
}

Demo: https://codesandbox.io/s/sweet-tess-zcf23k

Answer 4

If you are not concerned about supporting outdated browsers, you can incorporate the :has() CSS relational pseudo-class to style the tr element when it contains a button with data-state="open". It is important to note that this feature is currently unsupported in Firefox. However, as of now, it enjoys widespread adoption at approximately 87.53%.

If this approach aligns with your needs, the steps are as follows:

Apply a grey background to the .sss class nested within open buttons:
```
tr td button[data-state="open"] .sss {...}
```
Assign a grey background to the tr element that includes an open button:
```
tr:has(button[data-state="open"]) {...}
```

Your complete style.css should resemble the following:

.sss {
  visibility: hidden;
}

tr:hover .sss,
tr td button[data-state="open"] .sss {
  background: gray;
  visibility: visible;
}

tr:hover,
tr:has(button[data-state="open"]) {
  background: gray;
  visibility: visible;
  pointer-events: initial !important;
}

.style-button:hover {
  background-color: aqua;
}

Demo: https://codesandbox.io/s/sweet-tess-zcf23k

Answer 5

Answer №3

To prevent content from being pasted into the body, remove the use of <DropdownMenu.Portal>. You can ensure there is no space between cells by adding the CSS rule table { border-spacing: 0; }. For a demonstration, check out this example on CodeSandbox.

Answer 6

To prevent content from being pasted into the body, remove the use of <DropdownMenu.Portal>. You can ensure there is no space between cells by adding the CSS rule table { border-spacing: 0; }. For a demonstration, check out this example on CodeSandbox.

Answer 7

Answer №4

Exploring various methods, let's dive into one.

-Main.tsx

import "./styles.css";
import { SubMenu } from "./SubMenu";
import { useState } from "react";

const items = [
  {
    id: "0",
    name: "Samsung Galaxy"
  },
  {
    id: "1",
    name: "Iphone"
  }
];

export default function Main() {
  const [activeItem, setActiveItem] = useState<string | null>(null);

  const generateSubMenu = (id) => (
    <SubMenu openCallback={(boolValue) => boolValue ? setActiveItem(id) : setActiveItem(null)} />
  );

  const addSubMenuItems = items.map((item) => ({
    ...item,
    subMenu: generateSubMenu(item.id)
  }));
  //customization of submenu can be applied to each item in the list.

  return (
    <table>
      <tbody>
        {addSubMenuItems.map((val, key) => (
          <tr key={key} className={activeItem === val.id ? "active" : ""}>
            <td>{val.name}</td>
            <td>{val.subMenu}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

-SubMenu.tsx

import { useState } from "react";
import AppsIcon from "@mui/icons-material/Apps";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import "./styles.css";

export const SubMenu = ({ openCallback }) => {
  const [openState, setOpenState] = useState(false);

  const handleOpen = () => {
    setOpenState((prevState) => !prevState);
    if (openCallback) {
      openCallback(!openState); 
    }
  };

  return (
    <DropdownMenu.Root open={openState} onOpenChange={handleOpen}>
      <DropdownMenu.Trigger>
        <AppsIcon className="sss" />
      </DropdownMenu.Trigger>
      <DropdownMenu.Portal>
        <DropdownMenu.Content
          side="bottom"
          sideOffset={-30}
          align="start"
          alignOffset={80}
        >
          <button className="style-button">Edit </button>
          <button className="style-button">Make </button>
          <button className="style-button">Delete </button>
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  );
};

-style.css

table {
  border-spacing: 0;
}

.sss {
  visibility: hidden;
}

tr.active .sss,
tr:hover .sss {
  background: gray;
  visibility: visible;
}

tr.active,
tr:hover {
  background: gray;
  visibility: visible;
  pointer-events: initial !important;
}

.style-button:hover {
  background-color: aqua;
}

This setup is configured for optimal functionality.

May this assistance prove valuable to you.

Best wishes on your endeavors.

If this solution meets your needs, kindly consider endorsing it.

Answer 8

Exploring various methods, let's dive into one.

-Main.tsx

import "./styles.css";
import { SubMenu } from "./SubMenu";
import { useState } from "react";

const items = [
  {
    id: "0",
    name: "Samsung Galaxy"
  },
  {
    id: "1",
    name: "Iphone"
  }
];

export default function Main() {
  const [activeItem, setActiveItem] = useState<string | null>(null);

  const generateSubMenu = (id) => (
    <SubMenu openCallback={(boolValue) => boolValue ? setActiveItem(id) : setActiveItem(null)} />
  );

  const addSubMenuItems = items.map((item) => ({
    ...item,
    subMenu: generateSubMenu(item.id)
  }));
  //customization of submenu can be applied to each item in the list.

  return (
    <table>
      <tbody>
        {addSubMenuItems.map((val, key) => (
          <tr key={key} className={activeItem === val.id ? "active" : ""}>
            <td>{val.name}</td>
            <td>{val.subMenu}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

-SubMenu.tsx

import { useState } from "react";
import AppsIcon from "@mui/icons-material/Apps";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import "./styles.css";

export const SubMenu = ({ openCallback }) => {
  const [openState, setOpenState] = useState(false);

  const handleOpen = () => {
    setOpenState((prevState) => !prevState);
    if (openCallback) {
      openCallback(!openState); 
    }
  };

  return (
    <DropdownMenu.Root open={openState} onOpenChange={handleOpen}>
      <DropdownMenu.Trigger>
        <AppsIcon className="sss" />
      </DropdownMenu.Trigger>
      <DropdownMenu.Portal>
        <DropdownMenu.Content
          side="bottom"
          sideOffset={-30}
          align="start"
          alignOffset={80}
        >
          <button className="style-button">Edit </button>
          <button className="style-button">Make </button>
          <button className="style-button">Delete </button>
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  );
};

-style.css

table {
  border-spacing: 0;
}

.sss {
  visibility: hidden;
}

tr.active .sss,
tr:hover .sss {
  background: gray;
  visibility: visible;
}

tr.active,
tr:hover {
  background: gray;
  visibility: visible;
  pointer-events: initial !important;
}

.style-button:hover {
  background-color: aqua;
}

This setup is configured for optimal functionality.

May this assistance prove valuable to you.

Best wishes on your endeavors.

If this solution meets your needs, kindly consider endorsing it.

Ways to maintain hover functionality when the submenu is visible

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Should you include the dollar sign in a Vue HTML variable or not?

Inheriting the viewBox attribute with SvgIcon

Pressing the button disables the button's click functionality

What are the steps for implementing the innerClass style on the searchBox within the appBase?

Hover over an element repeatedly to trigger an action with jQuery, as opposed to just once

Error encountered when attempting to display a particular user with a specific _id in MongoDB, Node, and React: Failed to convert value "undefined" to ObjectId in the "user" model

Managing the loading state within a React application that utilizes Redux in conjunction with redux-thunk, navigating back to the component once the data has been successfully fetched for the

Rendering JSON responses in React.js can be achieved using either the fetch function or axios library

Axios cancel token preemptively cancelling request before it is initiated

Invoking a class method in Javascriptcore on iOS

Issue: Trouble with Rotating Tooltips in Javascript

Does React Native have a picker similar to this?

Sending data from PHP to JavaScript using AJAX

Using the combination of PHP and AJAX, modify files in real-time

I am facing difficulty in incorporating an IP address or URL within an IFRAME in my Cordova Android application

Incorporating JSON data seamlessly into a visually appealing Highcharts pie chart

`I'm encountering issues when trying to pass an array through localStorage into a new array`

Issue reported: "Usage of variable 'someVar' before assignment" ; however, it is being properly assigned before usage

Is there a disparity in how the mandatory field validator functions in Edge compared to Chrome?

Currently working on enhancing the responsiveness of the login form